Grid
Three Columns
Bootstrap grid system is beatiful and very easy to implement. split .col-sm inside .row.
One of three columns
One of three columns
One of three columns
Equal-width
This grid system automatically split .col eqal width.
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
Setting one column width
This grid system automatically adjust .col width.
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
Variable width content
This grid system automatically justify .col width.
1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
Equal-width multi-row
This grid system give equal .col width.
col
col
col
col
Stacked to horizontal
This grid system Stacked to horizontal
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
Mix and match
This grid system is mix and match
.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
Vertical alignment
This grid system gives Vertical alignment
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
Horizontal alignment
This grid system gives horizontal alignment.
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
Column wrapping
This grid system give column wrapping.
.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.
Subsequent columns continue along the new line.
Column breaks
This grid system gives column breaks.
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4