Grid System
Basic
One of three columns
One of three columns
One of three columns
<!-- Basic --> <b-container> <b-row> <b-col sm>One of three columns</b-col> <b-col sm>One of three columns</b-col> <b-col sm>One of three columns</b-col> </b-row> </b-container>
Equal-width
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
<!-- Equal-width --> <b-container> <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>
Setting one column width
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
<!-- Setting one column width --> <b-container> <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>
Stacked to horizontal
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
<!-- Stacked to horizontal --> <b-container> <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>
Mix and match
.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
<!-- Mix and match --> <b-container> <!-- 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>