twitter-bootstrap Using Clearfix in Rows and Cols The Naive First Attempt
Example
Before we begin, let's define some CSS for the examples. This is the head section of our sample. I always use border-radius and background-color when I'm testing, because it makes seeing cell divisions simple without adding any border size which could affect the size of the cells.
<head>
<title></title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
/* colorize all col- */
[class^="col-"] {
min-height: 30px;
border-radius: 10px;
background-color: lightblue;
}
/* a tall cell */
.cell-tall {
height: 100px;
background-color: orange;
}
/* a medium-height cell */
.cell-med {
height: 50px;
background-color: lightgreen;
}
/* padding top-bottom for some row examples */
.row.padded {
padding: 1rem 0 1rem 0;
}
</style>
</head>
With that out of the way, let's define a grid and look at the perfect results at all viewport sizes!
Using col-xs-6 col-md-3
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-3">1</div>
<div class="col-xs-6 col-md-3">2</div>
<div class="col-xs-6 col-md-3">3</div>
<div class="col-xs-6 col-md-3">4</div>
<div class="col-xs-6 col-md-3">5</div>
<div class="col-xs-6 col-md-3">6</div>
<div class="col-xs-6 col-md-3">7</div>
<div class="col-xs-6 col-md-3">8</div>
<div class="col-xs-6 col-md-3">9</div>
<div class="col-xs-6 col-md-3">10</div>
<div class="col-xs-6 col-md-3">11</div>
</div>
</div>
The previous two images show the rendering at medium and small screen sizes. Remember, we'll get FOUR columns on medium+ because of col-md-3, and TWO cells at small- because of col-xs-6.
Looks pretty good, right? I think we're done here! Said a LOT of naive Bootstrap sites out there just waiting to break...
