Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to size columns with Bootstrap 5.

Auto-Layout Columns

We can add columns that are laid out automatically.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col">  
      foo  
    </div>  
    <div class="col">  
      bar  
    </div>  
  </div>  
  <div class="row">  
    <div class="col">  
      foo  
    </div>  
    <div class="col">  
      bar  
    </div>  
    <div class="col">  
      baz  
    </div>  
  </div>  
</div>

We have the container class with 2 rows inside it.

Then we have 2 columns on the first row and 3 in the 2nd.

They’re divided evenly.

Setting One Column Width

We can set the width of one column.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col">  
      foo  
    </div>  
    <div class="col-6">  
      bar  
    </div>  
  </div>  
  <div class="row">  
    <div class="col">  
      foo  
    </div>  
    <div class="col-6">  
      bar  
    </div>  
    <div class="col">  
      baz  
    </div>  
  </div>  
</div>

We can set the width of one column with one number.

Variable Width Content

We can use the col-{breakpoint}-auto class to make one column resize automatically.

For example, we can write:

<div class="container">  
  <div class="row justify-content-md-center">  
    <div class="col col-lg-3">  
      something  
    </div>  
    <div class="col-md-auto">  
      Variable width content  
    </div>  
    <div class="col col-lg-3">  
      something  
    </div>  
  </div>  
  <div class="row">  
    <div class="col">  
      something  
    </div>  
    <div class="col-md-auto">  
      Variable width content  
    </div>  
    <div class="col col-lg-3">  
      something  
    </div>  
  </div>  
</div>

We have col-md-auto class to make columns automatically sized when we hit the md breakpoint.

All Breakpoints

We can stick to col if we don’t need columns to have a particular size.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col">col</div>  
    <div class="col">col</div>  
    <div class="col">col</div>  
    <div class="col">col</div>  
  </div>  
</div>

to make them all equal-sized.

Stacked to Horizontal

We can create a basic grid system that starts our stacked and becomes horizontal at a given breakpoint.

For example, we can use .col-sm-* to make the columns horizontal once they hit the sm breakpoint:

<div class="container">  
  <div class="row">  
    <div class="col-sm-7">col-sm-7</div>  
    <div class="col-sm-5">col-sm-5</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>  
</div>

Mix and Match

We can mix and match column classes for different breakpoints.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col-md-8">.col-md-8</div>  
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>  
  </div> <div class="row">  
    <div class="col-6 col-md-3">.col-6 .col-md-3</div>  
    <div class="col-6 col-md-3">.col-6 .col-md-3</div>  
    <div class="col-6 col-md-3">.col-6 .col-md-3</div>  
    <div class="col-6 col-md-3">.col-6 .col-md-3</div>  
  </div> <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>  
</div>

The first row has the columns stacked on mobile by making one full width and the other half-width.

The 2nd starts with 50% width on mobile and changes to 1/4 width of the desktop.

Columns are 50% width on mobile and desktop in the 3rd row.

Row Columns

The .row-cols-* classes let us set the number of column that best render our content and layout.

We can skip applying the column size classes for each column individually with it.

For example, we can write:

<div class="container">  
  <div class="row row-cols-2">  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>    
  </div>  
</div>

to size the columns so that we have 2 columns per row.

Also, we can write:

<div class="container">  
  <div class="row row-cols-3">  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
  </div>  
</div>

to have 3 columns per row.

To make them size automatically, we can write:

<div class="container">  
  <div class="row row-cols-auto">  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
  </div>  
</div>

Now they won’t be evenly spread across the viewport.

We can have 4 columns per row with:

<div class="container">  
  <div class="row row-cols-4">  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
    <div class="col">Column</div>  
  </div>  
</div>

The row-cols-4 class makes that possible.

Conclusion

There’re many ways to size rows and columns.

They’re all responsive and there’re many ways to size them automatically so we don’t have to do the sizing ourselves.