Bootstrap Grid System Basics
Chai Grindean
Bootstrap containers can be divided up into 12 sections
This shows a few various ways we can separate the columns
COL LG 6
COL LG 4
COL LG 2
COL LG 4
COL LG 4
COL LG 4
COL LG 1
COL LG 1
COL LG 1
COL LG 1
COL LG 1
COL LG 1
COL LG 1
COL LG 1
COL LG 1
COL LG 1
COL LG 1
COL LG 1
This example makes use for the 4 different device sizes
Extra small (Phones):<=768px | .col-xs-#
Small (Tablets): >= 768px | .col-sm-#
Medium (Desktops): >= 992px | .col-md-#
Large (Desktops): >= 1200px | .col-lg-#
COL LG 3 | MD 3 | SM 6
COL LG 3 | MD 3 | SM 6
COL LG 3 | MD 3 | SM 6
COL LG 3 | MD 3 | SM 6
Nested Grid Example
Nested Grid
The Other Half
COL LG 3 | MD 3 | SM 6
COL LG 3 | MD 3 | SM 6
column
col-lg-3
split
into
6
sections