How they work

• Columns build on the grid’s flexbox architecture. Flexbox means we have options for changing individual columns and modifying groups of columns at the row level. You choose how columns grow, shrink, or otherwise change.

• When building grid layouts, all content goes in columns. The hierarchy of Bootstrap’s grid goes from container to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences.

• Bootstrap includes predefined classes for creating fast, responsive layouts. With six breakpoints and a dozen columns at each grid tier, we have dozens of classes already built for you to create your desired layouts. This can be disabled via Sass if you wish.

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

Change the vertical alignment with any of the responsive align-items-* classes.

Add the disabled attribute to a fieldset to disable all the controls within. Browsers treat all native form controls (input, select, and button elements) inside a fieldset as disabled, preventing both keyboard and mouse interactions on them.

However, if your form also includes custom button-like elements such as ..., these will only be given a style of pointer-events: none; meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding tabindex="-1" to prevent them from receiving focus and aria-disabled="disabled" to signal their state to assistive technologies.

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100%; wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.

Reordering

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 5 across all six grid tiers. If you need more .order-* classes, you can modify the default number via Sass variable.

Offsetting columns

Use .offset-md-* classes to move columns to the right. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.