<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Magic Boxes</h2>
<hr>
<p>Toggle the Boxes - they'll magically fade in and out!</p>
<button type="button" class="btn btn-success">Toggle</button>
<hr>
<div class="row">
<div class="column" style="background-color:#fff;">
<div id="div1" style="width:80px;height:80px;display:none;background-color:teal;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:orangered;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:lightblue;"></div><br>
</div>
<div class="column" style="background-color:#fff;">
<div id="div4" style="width:80px;height:80px;display:none;background-color:black;"></div><br>
<div id="div5" style="width:80px;height:80px;display:none;background-color:olive;"></div><br>
<div id="div6" style="width:80px;height:80px;display:none;background-color:grey;"></div>
</div>
<div class="column" style="background-color:#fff;">
<div id="div7" style="width:80px;height:80px;display:none;background-color:cadetblue;"></div><br>
<div id="div8" style="width:80px;height:80px;display:none;background-color:orange;"></div><br>
<div id="div9" style="width:80px;height:80px;display:none;background-color:lightgreen;"></div>
</div>
</div>
</div>
</div>
.btn btn-success {
color: red;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 30%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
