Grid System

col property is used to set the column size.

Utilize breakpoint-specific column props for easy column sizing without an explicit numbered like colSm="6".

For example, here are two grid layouts that apply to every device and viewport, from xs to xxl. Add any number of unit-less col for each breakpoint you need and every column will be the same width.

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. Note that the other columns will resize no matter the width of the center column.

Use colXs="auto", colSm="auto", colMd="auto", colLg="auto", colXl="auto", or colXxl="auto" classes to size columns based on the natural width of their content.

For grids that are the same from the smallest of devices to the largest, use the col and col="1~12" . Specify a numbered prop when you need a particularly sized column; otherwise, feel free to stick to col.

Using a single set colSm="1~12", you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (sm).

Use a combination of different col prop for each tier as needed. See the example below for a better idea of how it all works.

Use the responsive rowCols properties to quickly set the number of columns that best render your content and layout. Whereas normal col="1~12" classes apply to the individual columns (e.g., colmd="4"), the row columns classes are set on the parent row as a shortcut. With rowCols="auto" you can give the columns their natural width. Use these row columns classes to quickly create basic grid layouts or to control your card layouts.

To nest your content with the default grid, add a new row and set of colSm="1~12" columns within an existing colSm="1~12" column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).