By default Bootstrap offers the option to set multiple grid classes, thus allowing to describe different grid behaviour for multiple screen sizes.
The global .col-
class works for all screens. .col-medium
and .col-large
are optional and will change grid appearance for their
related screen sizes. .col-medium
handles medium sized screens, .col-large
is set to handle desktop and laptop resolutions.
Tiny devices Phones (<768px) | Small devices Tablets (>768px) | Medium devices Desktops (>992px) | Large devices Desktops (>1200px) | |
---|---|---|---|---|
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
Max container width | None (auto) | 728px | 940px | 1170px |
Class prefix | .col- |
.col-medium- |
.col-large- |
|
# of columns | 12 | |||
Max column width | Auto | ~60px | ~78px | ~98px |
Gutter width | 30px (15px on each side of a column) | |||
Nestable | Yes | |||
Offsets | N/A | Yes | ||
Column ordering | N/A | Yes |
Rule of thumb for grid classes:
.col-
= small screens.col-medium-
= medium screens (optional).col-large-
= large screens (optional)The following column will appear different for all three screen sizes. It will cover half the width on small screens, one third for medium and one quarter for large screens.
<div class="row"> <div class="col-6 col-medium-4 col-large-3">...</div> </div>
The grid layout module always contains a maximum of 12 cells within a row of the grid. When the limit of 12 cells is reached, the grid requires a new row. Furthermore a grid can not exists without a row root node.
Dividing a row into cells works like this:
<div class="row"> <div class="col-3">...</div> <div class="col-6">...</div> <div class="col-3">...</div> </div>
Each column can contain new rows, wich enables nesting:
<div class="row"> <div class="col-3">...</div> <div class="col-6"> <div class="row"> <div class="col-5">...</div> <div class="col-7">...</div> </div> </div> <div class="col-3">...</div> </div>
Columns can be offset within a row. Always maintain the maximum number of 12 slots per row, even when offsetting a coulum.
Offsetting columns only works for large screens!
<div class="row"> <div class="col-5 col-offset-6">...</div> </div>
The order of columns can be changed by pushing and pulling within their shared row.
Reordering columns only works for large and medium screens!
<div class="row"> <div class="col-5 col-push-7">1st column</div> <div class="col-7 col-pull-5">2nd column</div> </div>
Bootstraps grid related mixins can be used without any modifications