Offset classes
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
Responsive breakpoints
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
Margin utilities
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto
Nesting
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Three Equal Columns
.col-sm-4
.col-sm-4
.col-sm-4
Three Unequal Columns
.col-sm-3
.col-sm-6
.col-sm-3
No gutters
.col-sm-3
.col-sm-6
.col-sm-3
Two Columns With Two Nested Columns
Mixed: Mobile And Desktop
The Bootstrap grid system has four classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). The classes can be combined to create more dynamic and flexible layouts.
.col-xs-9 .col-md-7
.col-xs-3 .col-md-5
.col-xs-6 .col-md-10
.col-xs-6 .col-md-2
.col-xs-7 .col-sm-6 .col-lg-8
.col-xs-5 .col-sm-6 .col-lg-4
.col-xs-6 .col-sm-8 .col-lg-10
.col-xs-6 .col-sm-4 .col-lg-2
Clear Floats
Column 1
Resize the browser window to see the effect.
Column 2
Column 3
Column 4
Offsetting Columns
.col-sm-5 .col-md-6
Push And Pull - Change Column Ordering
.col-sm-4 .col-sm-push-8
.col-sm-8 .col-sm-pull-4
Using Only Large
Hello World!
Using Only Medium
Using Only Small
Hello World!
Stacked-to-horizontal
Hello World!