([91514af](https://github.com/bootstrap-vue/bootstrap-vue/commit/91514af))

([543c3c2](https://github.com/bootstrap-vue/bootstrap-vue/commit/543c3c2))

Bootstrap's grid system uses a series of containers, rows, and columns to lay out and align content.

It's built with flexbox and is fully responsive. Below is an example and an in-depth look at how the

grid comes together.

.container.

Here's how it works:

- Containers provide a means to center your site's contents. Use `<b-container>` for fixed width or

`<b-container fluid>` for full width.

- Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the

negative margin method on `<b-row>` to ensure all your content is aligned properly down the left

side.

- Content should be placed within `<b-col>` columns, and only columns may be immediate children of

`<b-row>`.

- Column widths, internally, are set in percentages, so they're always fluid and sized relative to

their parent element.

- Columns have horizontal padding to create the gutters between individual columns, however, you can

remove the margin from `<b-row>` and padding from `<b-col>` by setting the `no-gutters` prop on

`<b-row>`.

- There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small),

small, medium, large, and extra large.

- Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it

(e.g., `<b-col sm="4">` applies to small, medium, large, and extra large devices).

[inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers).

While Bootstrap uses `ems` or `rems` for defining most sizes, `px`s are used for grid breakpoints

For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add

any number of unit-less classes for each breakpoint you need and every column will be the same

Equal-width columns can be broken into multiple lines, but there is a

[Safari flexbox bug](https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items)

that prevents this from working without an explicit flex-basis or border. Our example works thanks

to the border being set; you can do the same with `.col { border: 1px solid transparent; }`.

Alternatively, you can set the flex-basis to the width of the column (e.g.,

`.col { flex: 1 0 50%; }`).

Both these fixes have been documented in a

[reduced test case outside Bootstrap](https://output.jsbin.com/micohor).

[MDN `String.prototype.localeCompare()` documentation](https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare)

type: String,

type: String, // 'light', 'dark' or null (or custom)

// In always stacked mode, we don't bother rendering the head/foot.

// Refernce to `selectAllRows` and `clearSelected()`, if table is Selectable

$trs.push(h(BTr, { class: this.tfootTrClass }, $cells))

$trs.push(h(BTr, { class: this.theadTrClass }, $cells))

"description": "Header variant: 'light' or 'dark', or unset"

"description": "Footer variant: 'light' or 'dark', or unset"

"description": "Header variant: 'light' or 'dark', or unset"

"description": "Footer variant: 'light' or 'dark', or unset"

return this.bvTableRowGroup.headVariant

return [this.variant ? `${this.isDark ? 'bg' : 'table'}-${this.variant}` : null]