Layout and Grid System
How it works
<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>Bootstrap's grid system uses a series of containers, rows, and columns to layout 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.
Equal-width columns
<b-container class="bv-example-row">
<b-row>
<b-col>1 of 2</b-col>
<b-col>2 of 2</b-col>
</b-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> 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 width.
Setting one column width
<b-container class="bv-example-row">
<b-row class="text-center">
<b-col>1 of 3</b-col>
<b-col cols="8">2 of 3 (wider)</b-col>
<b-col>3 of 3</b-col>
</b-row>
<b-row class="text-center">
<b-col>1 of 3</b-col>
<b-col cols="5">2 of 3 (wider)</b-col>
<b-col>3 of 3</b-col>
</b-row>
</b-container>Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
Variable width content
<b-container class="bv-example-row">
<b-row class="justify-content-md-center">
<b-col col lg="2">1 of 3</b-col>
<b-col cols="12" md="auto">Variable width content</b-col>
<b-col col lg="2">3 of 3</b-col>
</b-row>
<b-row>
<b-col>1 of 3</b-col>
<b-col cols="12" md="auto">Variable width content</b-col>
<b-col col lg="2">3 of 3</b-col>
</b-row>
</b-container> Use {breakpoint}="auto" props to size columns based on the natural width of their content.
All breakpoints
<b-container class="bv-example-row">
<b-row>
<b-col>col</b-col>
<b-col>col</b-col>
<b-col>col</b-col>
<b-col>col</b-col>
</b-row>
<b-row>
<b-col cols="8">col-8</b-col>
<b-col cols="4">col-4</b-col>
</b-row>
</b-container> For grids that are the same from the smallest of devices to the largest, use the col and cols="*" props. Specify a number of cols when you need a particularly sized column; otherwise, feel free to stick to col (which is applied automatically if no cols are specified).
Stacked to horizontal
<b-container class="bv-example-row">
<b-row>
<b-col sm="8">col-sm-8</b-col>
<b-col sm="4">col-sm-4</b-col>
</b-row>
<b-row>
<b-col sm>col-sm</b-col>
<b-col sm>col-sm</b-col>
<b-col sm>col-sm</b-col>
</b-row>
</b-container> Using a single set of sm="*" or sm (boolean for equal width @sm) props, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices
Mix and match
<b-container class="bv-example-row">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<b-row>
<b-col cols="12" md="8">cols="12" md="8"</b-col>
<b-col cols="6" md="4">cols="6" md="4"</b-col>
</b-row>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<b-row>
<b-col cols="6" md="4">cols="6" md="4"</b-col>
<b-col cols="6" md="4">cols="6" md="4"</b-col>
<b-col cols="6" md="4">cols="6" md="4"</b-col>
</b-row>
<!-- Columns are always 50% wide, on mobile and desktop -->
<b-row>
<b-col cols="6">cols="6"</b-col>
<b-col cols="6">cols="6"</b-col>
</b-row>
</b-container>Don't want your columns to simply stack in some grid tiers? Use a combination of different props for each tier as needed. See the example below for a better idea of how it all works.