<commit_before># Layout and Grid System

> Use the powerful mobile-first flexbox grid (via the `<b-container>`, `<b-row>`, `<b-form-row>` and
> `<b-col>` components) to build layouts of all shapes and sizes thanks to a twelve column system,
> five default responsive tiers, CSS Sass variables and mixins, and dozens of predefined classes.

BootstrapVue provides several convenient _functional_ components tailored for layout, which can
simplify your complex page markup compared to traditional Bootstrap v4 markup. Feel free to switch
back and forth between traditional Bootstrap v4 markup (i.e. `<div>`s and classes) and
BootstrapVue's convenient functional layout components.

## How it works

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content.
It's built with
[flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

```html
<b-container class="bv-example-row">
  <b-row>
    <b-col>1 of 3</b-col>
    <b-col>2 of 3</b-col>
    <b-col>3 of 3</b-col>
  </b-row>
</b-container>

<!-- b-grid-how-it-works.vue -->
```

The above example creates three equal-width columns on small, medium, large, and extra large devices
using Bootstrap v4's predefined grid classes. Those columns are centered in the page with the parent
`.container`.

Breaking it down, here's how it works:

- Containers provide a means to center and horizontally pad your site's contents. Use
  `<b-container>` for a responsive pixel width or `<b-container fluid>` for `width: 100%` across all
  viewport and device sizes.
- Rows are wrappers for columns. Each column has horizontal `padding` (called a gutter) for
  controlling the space between them. This `padding` is then counteracted on the rows with negative
  margins. This way, all the content in your columns is visually aligned down the left side.
- In a grid layout, content must be placed within columns and only columns may be immediate children
  of rows.
- Thanks to flexbox, grid columns without a set width will automatically layout with equal widths.
  For example, four instances of `<b-col sm="auto">` will each automatically be 25% wide for small
  breakpoints.
- Column prop `cols` indicates the number of columns you'd like to use out of the possible 12 per
  row regardless of breakpoint (starting at breakpoint `xs`). So, if you want three equal-width
  columns at any breakpoint, you can use `<b-col cols="4">`.
- Column props `sm`, `md`, `lg`, `xl` indicate the number of columns you'd like to use out of the
  possible 12 per row, at the various breakpoints. So, if you want three equal-width columns at
  breakpoint `sm`, you can use `<b-col sm="4">`. the special value `auto` can be used to take up the
  remaining available column space in a row.
- Column `width`s 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>`.
- To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint:
  all breakpoints (extra small), small, medium, large, and extra large.
- Grid breakpoints are based on minimum width media queries, meaning **they apply to that one
  breakpoint and all those above it** (e.g., `<b-col sm="4">` applies to small, medium, large, and
  extra large devices, but not the first `xs` breakpoint).
- You can use predefined grid classes or Sass mixins for more semantic markup.

Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs),
like the
[inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).

## Containers `<b-container>`

Containers (`<b-container>`) are the most basic layout element in Bootstrap. Choose from a
responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) by default,
or fluid-width (meaning it's 100% wide all the time) by setting 'fluid' prop, or responsive
containers where the container is fluid up until a specific breakpoint (requires Bootstrap CSS
`v4.4+`).

While containers can be nested, most layouts do not require a nested container.

The default breakpoint widths can be configured using Bootstrap V4.x SCSS variables. See the
[Theming](/docs/reference/theming) reference page for additional details, and the table in the
[Grid options](#grid-options) section below.

### Default container

The default `<b-container>` is a responsive, fixed-width container, meaning its `max-width` changes
at each viewport width breakpoint.

```html
<b-container>
  <!-- Content here -->
</b-container>
```

### Fluid width container

Using the `fluid` prop on `<b-container>` will render a container that is always 100% width,
regardless of viewport breakpoint.

```html
<b-container fluid>
  <!-- Content here -->
</b-container>
```

Setting the `fluid` prop to true (or an empty string) is equivalent to the Bootstrap
`.container-fluid` class.

### Responsive fluid containers

<span class="badge badge-info small">Requires Bootstrap v4.4+ CSS</span>

Responsive containers are new in Bootstrap v4.4. They allow you to specify a container that is 100%
wide (fluid) until particular breakpoint is reached at which point a `max-width` is applied. For
example, setting prop `fluid` to `'md'` will render a container that is 100% wide to start until the
`'md'` breakpoint is reached, at which point it will remain at that breakpoint's container
`max-width` until the next breakpoint is reached.

```html
<b-container fluid="sm">
  100% wide until small breakpoint
</b-container>
<b-container fluid="md">
  100% wide until medium breakpoint
</b-container>
<b-container fluid="lg">
  100% wide until large breakpoint
</b-container>
<b-container fluid="xl">
  100% wide until extra large breakpoint
</b-container>
```

Setting the fluid prop to a breakpoint name translates to the Bootstrap class
`.container-{breakpoint}`.

Refer to the [Grid options section](#grid-options) table below for the default container width
values.

## Rows `<b-row>` and `<b-form-row>`

Rows are wrappers for [columns](#columns-b-col). Each column has horizontal padding (called a<commit_msg>chore(docs): minor tweaks to the layout and grid docs (#5143)<commit_after># Layout and Grid System

> Use the powerful mobile-first flexbox grid (via the `<b-container>`, `<b-row>`, `<b-form-row>` and
> `<b-col>` components) to build layouts of all shapes and sizes thanks to a twelve column system,
> five default responsive tiers, CSS Sass variables and mixins, and dozens of predefined classes.

BootstrapVue provides several convenient _functional_ components tailored for layout, which can
simplify your complex page markup compared to traditional Bootstrap v4 markup. Feel free to switch
back and forth between traditional Bootstrap v4 markup (i.e. `<div>`s and classes) and
BootstrapVue's convenient functional layout components.

## How it works

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content.
It's built with
[flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

```html
<b-container class="bv-example-row">
  <b-row>
    <b-col>1 of 3</b-col>
    <b-col>2 of 3</b-col>
    <b-col>3 of 3</b-col>
  </b-row>
</b-container>

<!-- b-grid-how-it-works.vue -->
```

The above example creates three equal-width columns on small, medium, large, and extra large devices
using Bootstrap v4's predefined grid classes. Those columns are centered in the page with the parent
`.container`.

Breaking it down, here's how it works:

- Containers provide a means to center and horizontally pad your site's contents. Use
  `<b-container>` for a responsive pixel width or `<b-container fluid>` for `width: 100%` across all
  viewport and device sizes.
- Rows are wrappers for columns. Each column has horizontal `padding` (called a gutter) for
  controlling the space between them. This `padding` is then counteracted on the rows with negative
  margins. This way, all the content in your columns is visually aligned down the left side.
- In a grid layout, content must be placed within columns and only columns may be immediate children
  of rows.
- Thanks to flexbox, grid columns without a set width will automatically layout with equal widths.
  For example, four instances of `<b-col sm="auto">` will each automatically be 25% wide for small
  breakpoints.
- Column prop `cols` indicates the number of columns you'd like to use out of the possible 12 per
  row regardless of breakpoint (starting at breakpoint `xs`). So, if you want three equal-width
  columns at any breakpoint, you can use `<b-col cols="4">`.
- Column props `sm`, `md`, `lg`, `xl` indicate the number of columns you'd like to use out of the
  possible 12 per row, at the various breakpoints. So, if you want three equal-width columns at
  breakpoint `sm`, you can use `<b-col sm="4">`. the special value `auto` can be used to take up the
  remaining available column space in a row.
- Column `width`s 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>`.
- To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint:
  all breakpoints (extra small), small, medium, large, and extra large.
- Grid breakpoints are based on minimum width media queries, meaning **they apply to that one
  breakpoint and all those above it** (e.g., `<b-col sm="4">` applies to small, medium, large, and
  extra large devices, but not the first `xs` breakpoint).
- You can use predefined grid classes or Sass mixins for more semantic markup.

Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs),
like the
[inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).

## Containers `<b-container>`

Containers (`<b-container>`) are the most basic layout element in Bootstrap. Choose from a
responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) by default,
or fluid-width (meaning it's 100% wide all the time) by setting 'fluid' prop, or responsive
containers where the container is fluid up until a specific breakpoint (requires Bootstrap CSS
`v4.4+`).

While containers can be nested, most layouts do not require a nested container.

The default breakpoint widths can be configured using Bootstrap V4.x SCSS variables. See the
[Theming](/docs/reference/theming) reference page for additional details, and the table in the
[Grid options](#grid-options) section below.

### Default container

The default `<b-container>` is a responsive, fixed-width container, meaning its `max-width` changes
at each viewport width breakpoint.

```html
<b-container>
  <!-- Content here -->
</b-container>
```

### Fluid width container

Using the `fluid` prop on `<b-container>` will render a container that is always 100% width,
regardless of viewport breakpoint.

```html
<b-container fluid>
  <!-- Content here -->
</b-container>
```

Setting the `fluid` prop to true (or an empty string) is equivalent to the Bootstrap
`.container-fluid` class.

### Responsive fluid containers

<span class="badge badge-info small">Requires Bootstrap v4.4+ CSS</span>

Responsive containers are new in Bootstrap v4.4. They allow you to specify a container that is 100%
wide (fluid) until particular breakpoint is reached at which point a `max-width` is applied. For
example, setting prop `fluid` to `'md'` will render a container that is 100% wide to start until the
`'md'` breakpoint is reached, at which point it will become a standard non-fluid container.

```html
<b-container fluid="sm">
  100% wide until small breakpoint
</b-container>
<b-container fluid="md">
  100% wide until medium breakpoint
</b-container>
<b-container fluid="lg">
  100% wide until large breakpoint
</b-container>
<b-container fluid="xl">
  100% wide until extra large breakpoint
</b-container>
```

Setting the fluid prop to a breakpoint name translates to the Bootstrap class
`.container-{breakpoint}`.

Refer to the [Grid options section](#grid-options) table below for the default container width
values.

## Rows `<b-row>` and `<b-form-row>`

Rows are wrappers for [columns](#columns-b-col). Each column has horizontal padding (called a
{'fraction_non_alphanumeric': 0.0936364339287095, 'fraction_numerical': 0.00850537384984149, 'mean_word_length': 4.432171356572868, 'pattern_counts': {'":': 0, '<': 97, '<?xml version=': 0, '>': 103, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6516954', 'n_tokens_mistral': 3811, 'n_tokens_neox': 3553, 'n_words': 1769}