Bootstrap 5 Grid Examples

We have compiled some examples of Bootstrap 5 grid layout.

Three equally divided columns

Use on a specified number of elements .col Class, Bootstrap will recognize how many elements (and create columns of equal width). In the following example, we used three col elements, each with 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>

Try It Yourself

Three equal columns using numbers

You can also use numbers to control column widths. Just make sure the total is equal to or less than 12 (you do not need to use all 12 available 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>

Try It Yourself

Three unequal column splits

To create unequal columns, you must use numbers. The following example will create a split of 25%/50%/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>

Try It Yourself

Set one column width

However, setting the width of only one column is enough, and let the adjacent columns automatically adjust their size. The following example will create a split of 25%/50%/25%:

Example

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

Try It Yourself

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>

Try It Yourself

Row Cols

You can also use .row-cols-* The number of columns controlled should appear next to each other (regardless of how many columns there are):

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>

Try It Yourself

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>

Try It Yourself

Equal height

If one column is taller than the other (due to text or CSS height), the rest will follow:

Example

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Try It Yourself

Nested columns

The following example demonstrates how to create a two-column layout with one column containing two other columns:

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>

Try It Yourself

Responsive classes

Bootstrap 5 grid system has five classes:

  • .col- (extra small devices - screen width less than 576px)
  • .col-sm- (small devices - screen width of 576px or more)
  • .col-md- (medium devices - screen width of 768 pixels or more)
  • .col-lg- (large devices - screen width of 992 pixels or more)
  • .col-xl- (xlarge devices - screen width of 1200px or more)
  • .col-xxl- (xxlarge devices - screen width of 1400px or more)

You can combine the above classes to create more dynamic and flexible layouts.

Tip:Each class is proportionally scaled, so if you want to sm and md If you set the same width, you only need to specify sm.

Stacked to horizontal

The following example demonstrates how to create a column layout that starts stacked on extra small devices and then becomes horizontal on larger devices (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>

Try It Yourself

Mix and Match

Example

/* Split 50%/50% on ultra-small devices, 75%/25% on large 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>
/* Split 58%/42% on ultra-small, small, and medium devices, 66.3%/33.3% on large and extra-large 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>
/* Split 25%/75% on small devices, 50%/50% on medium devices, 33%/66% on large and extra-large devices. Automatically stacked (100%) on ultra-small devices. */
<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>

Try It Yourself

No gutter

To change the spacing between columns (extra space), please use any .g-1|2|3|4|5 class (.g-4 is the default value).

To completely remove the gutters (gutters), please use .g-0:

Example

<div class="row g-0">

Try It Yourself