Code
.row
.col
.col-sm|md|lg|xl|xxl-#
Definitions
- row
- ▪ Creates a grid row.
- col
- ▪ Creates a grid column. Without further specification, the columns will be equal (auto) and unresponsive.
- col-sm|md|lg|xl|xxl-#
- ▪ Determines when the grid should be responsive. The # indicates how many columns it should span.
Key Points
- The grid system is build with flexbox.
- The grid system allows up to 12 columns across a page.
- NOTE: Make sure the sum of your columns adds up to 12 or less.
- Each breakpoint scales up. If you want to set the same widths for small and medium, simply specify the small breakpoint.
Example with 3 equal columns.
Column 1
Column 2
Column 3
Use .row with three .col children.
Reponsive columns that will stack on small devices.
Column 1
Column 2
Column 3
Column 4
Use four columns with .col-sm-3.
Two unequal responsive columns.
Column 1 uses 1/3 of the 12 columns.
Column 2 uses 2/3 of the 12 columns.