A
Bootstrap Column Control represents a column in a Bootstrap grid and can only be added to
Bootstrap Row Controls.
Using Bootstrap classes you can apply styling for 6 different screen sizes:
- Extra Small xs.
- Small sm.
- Medium md.
- Large lg.
- Extra Large xl.
- Extra Extra Large xxl.
If you pass one of these break points while resizing a screen the browser re-renders the columns.
Each column can be assigned a different width for each screen size, widths can be set in three ways:
- Content Width stretches to fit in its content.
- Equal Width split evenly with the other columns
- An integer between 1 and 12 the widths of all colums should add up to 12, for example:
- 3 columns, equivalent to a quarter of the width.
- 4 columns, equivalent to a third of the width.
- 6 columns, equivalent to half of the width.
If a column has no setting for a particular screen size it inherits the setting from the next smallest screen size.
Bootstrap Column Controls can also indivually override their vertical alignment in the row.