BS4 Grid Examples
We have gathered a few Bootstrap 4 grid layout examples below.
Three Equal Columns
When you apply the .col class to a given number of elements, Bootstrap counts the number of elements and generates equal-width columns accordingly. Three col components are used in the sample below, and each one has a width of 33.33%.
Example
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Three Equal Columns Using Numbers
Numbers can also be used to regulate the width of the columns. You just need to ensure that the total equals 12 or less (you don’t have to use all 12 columns):
Example
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
Three Unequal columns
You must utilize integers to make columns that are not equal. This example will split the money into 25%, 50%, and 25%.
Example
<div class="row">
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
<div class="col-3">col-3</div>
</div>
Setting One Column Width
Still, it’s sufficient to just specify the width of one column, and the other columns will adjust to fit around it automatically. This example will split the money into 25%, 50%, and 25%.
Example
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div class="col">col</div>
</div>
More Equal Columns
Example
<!-- Two equal columns -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four equal columns -->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
<!-- Six equal columns -->
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>
Row Cols
Using the .row-cols-* classes, you can also specify how many columns (independent of the number of cols) should be adjacent to one another:
Example
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>
More Unequal Columns
Example
<!-- Two Unequal Columns -->
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3 of 4</div>
<div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
Equal Height
Example
<div class="row">
<div class="col">Lorem ipsum...</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Nested Columns
A two-column layout with an additional two columns inside one of the columns can be made using the example below:
Example
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Responsive Classes
- .col- (extra small devices – screen width less than 576px)
- .col-sm- (small devices – screen width equal to or greater than 576px)
- .col-md- (medium devices – screen width equal to or greater than 768px)
- .col-lg- (large devices – screen width equal to or greater than 992px)
- .col-xl- (xlarge devices – screen width equal to or greater than 1200px)
Stacked to Horizontal
The example below demonstrates how to design a column layout that appears stacked on extremely small devices and then becomes horizontal on devices that are larger (sm, md, lg, and xl):
Example
<div class="row">
<div class="col-sm-9">col-sm-9</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
Mix and Match
Example
<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<div class="row">
<div class="col-6 col-sm-9">col-6 col-sm-9</div>
<div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>
<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<div class="row">
<div class="col-7 col-lg-8">col-7 col-lg-8</div>
<div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>
<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
No Gutters
Add the .no-gutters class to the .row container to remove gutters (extra space):
Example
<div class="row no-gutters">
