The default grid system utilizes 12 columns, and is built for mobile first by incorporating a grid for each device into one. The table below defines how the grid system works and how the 4 grids work with different screen sizes.
Extra small devices Phones (<768px and lower) | Small devices Tablets (≥768px and up) | Medium devices Desktops (≥992px and up) | Large devices Desktops (≥1200px and up) | |
---|---|---|---|---|
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
Container width | None (auto) | 750px | 970px | 1170px |
Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
# of columns | 12 | |||
Column width | Auto | 60px | 78px | 95px |
Gutter width | 30px (15px on each side of a column) | |||
Nestable | Yes | |||
Offsets | Yes | |||
Column ordering | Yes |
<div class="row">
<div class="col-md-1">
.col-md-1
</div>
<div class="col-md-1">
.col-md-1
</div>
<div class="col-md-1">
.col-md-1
</div>
<div class="col-md-1">
.col-md-1
</div>
<div class="col-md-1">
.col-md-1
</div>
<div class="col-md-1">
.col-md-1
</div>
<div class="col-md-1">
.col-md-1
</div>
<div class="col-md-1">
.col-md-1
</div>
<div class="col-md-1">
.col-md-1
</div>
<div class="col-md-1">
.col-md-1
</div>
<div class="col-md-1">
.col-md-1
</div>
<div class="col-md-1">
.col-md-1
</div>
<div class="col-md-3">
.col-md-3
</div>
<div class="col-md-3">
.col-md-3
</div>
<div class="col-md-3">
.col-md-3
</div>
<div class="col-md-3">
.col-md-3
</div>
<div class="col-md-8">
.col-md-8
</div>
<div class="col-md-4">
.col-md-4
</div>
<div class="col-md-6">
.col-md-6
</div>
<div class="col-md-6">
.col-md-6
</div>
</div>