hub.eb?material_id=340&track_id=343

Bootstrap Column Control


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.

Steps


1

Create a Form.

Add a Bootstrap Container Control to a page and add a Bootstrap Row Control to it.

Add two Bootstrap Column Controls to the row and give each one a different background colour.

2

Set the size of the left hand column to a third (4/12) on medium screens and a quarter (3/12) on large screens.

3

Run the Form and resize the browser window to test the layout.

The column widths will change as you resize the browser window.

On extra small screens sizes, the columns will display one above the other.

Current Module

Part of tracks

Related