Responsive 12-column grid system
See more examples
For m-row only:
||Boolean attribute||Centers the columns in the row.|
For m-col only:
||[sm-|md-|lg-]1-12||Sets the number of columns to span on a 12 column grid. Use the screen size prefixes to resize on specific screen sizes, e.g.
||[sm-|md-|lg-]1-12||Sets the number of columns to indent on a 12 column grid. Use the screen size prefixes to resize on specific screen sizes. Indenting a column by 12 is only useful if you're animating that column back into view.|
||[sm-|md-|lg-]1-12||Overrides the order of the column in its row. Use the screen size prefixes to reorder columns for specific screen sizes.|
Grids can be nested inside other grids to create complex responsive layouts. Two or even three Grids deep are normal, but any more than that and your implementation could be poorly designed.
Although Grid is very capable, avoid the temptation to use it for everything. Sometimes a utility class is sufficient. Compare the three centered headings below to see how Grid may not always be the right solution:
There are no accessibility recommendations for Grid.