Andrew Dorokhov
Homepage: open_in_new getbootstrap.com .
Root container
Fixed width (centered):
<div class="container">
...
</div>
Full viewport width:
<div class="container-fluid">
...
</div>
Row
Used inside a container:
<div class="row">
...
</div>
Columns
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
Breakpoint prefixes (classic Bootstrap 3 naming):
xssmmdlg
When the viewport goes below the chosen breakpoint, that column expands to full width.
Different widths per breakpoint
<div class="row">
<div class="col-xs-12 col-sm-9 col-md-4 col-lg-6">...</div>
<div class="col-xs-12 col-sm-3 col-md-8 col-lg-6">...</div>
</div>
Push / pull
Offset columns relative to their natural order (for example to swap them visually):
<div class="row">
<div class="col-lg-4 col-lg-push-8">...</div>
<div class="col-lg-8 col-lg-pull-4">...</div>
</div>
push / pull shift a column from its initial position.