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 align columns with Bootstrap 5.

Nesting

We can nest our content with the default grid.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col-sm-3">  
      Level 1: .col-sm-3  
    </div>  
    <div class="col-sm-9">  
      <div class="row">  
        <div class="col-7 col-sm-5">  
          Level 2: .col-7 .col-sm-5  
        </div>  
        <div class="col-6 col-sm-6">  
          Level 2: .col-6 .col-sm-6  
        </div>  
      </div>  
    </div>  
  </div>  
</div>

Columns

We can change columns with options for alignment, ordering, and offsetting.

It’s based on flexbox to make sizing easy.

Bootstrap has predefined classes for creating fast and responsive layouts.

For example, we can write:

<div class="container">  
  <div class="row align-items-start">  
    <div class="col">  
      1 of three columns  
    </div>  
    <div class="col">  
      2 of three columns  
    </div>  
    <div class="col">  
      3 of three columns  
    </div>  
  </div>  
  <div class="row align-items-center">  
    <div class="col">  
      1 of three columns  
    </div>  
    <div class="col">  
      2 of three columns  
    </div>  
    <div class="col">  
      3of three columns  
    </div>  
  </div>  
  <div class="row align-items-end">  
    <div class="col">  
      1 of three columns  
    </div>  
    <div class="col">  
      2 of three columns  
    </div>  
    <div class="col">  
      3 of three columns  
    </div>  
  </div>  
</div>

We have the col class to size the columns.

Th align the column we have the align-items classes.

align-items-start aligns at the top

align-items-center vertically centers the columns.

align-items-end put the columns at the bottom.

We can have one row with multiple columns with their own vertical alignment.

To do that, we write:

<div class="container">  
  <div class="row">  
    <div class="col align-self-start">  
      One of three columns  
    </div>  
    <div class="col align-self-center">  
      One of three columns  
    </div>  
    <div class="col align-self-end">  
      One of three columns  
    </div>  
  </div>  
</div>

We can put the align classes in each column to vertically position them.

Horizontal Alignment

To horizontally align columns, we can use the justify-content classes.

For example, we can write:

<div class="container">  
  <div class="row justify-content-start">  
    <div class="col-4">  
      One of two columns  
    </div>  
    <div class="col-4">  
      One of two columns  
    </div>  
  </div>  
  <div class="row justify-content-center">  
    <div class="col-4">  
      One of two columns  
    </div>  
    <div class="col-4">  
      One of two columns  
    </div>  
  </div>  
  <div class="row justify-content-end">  
    <div class="col-4">  
      One of two columns  
    </div>  
    <div class="col-4">  
      One of two columns  
    </div>  
  </div>  
  <div class="row justify-content-around">  
    <div class="col-4">  
      One of two columns  
    </div>  
    <div class="col-4">  
      One of two columns  
    </div>  
  </div>  
  <div class="row justify-content-between">  
    <div class="col-4">  
      One of two columns  
    </div>  
    <div class="col-4">  
      One of two columns  
    </div>  
  </div>  
  <div class="row justify-content-evenly">  
    <div class="col-4">  
      One of two columns  
    </div>  
    <div class="col-4">  
      One of two columns  
    </div>  
  </div>  
</div>

justify-content-start left align the columns.

justify-content-center center aligns the columns.

justify-content-end right align the columns.

justify-content-around aligns the columns with space before, between and after each column.

justify-content-between aligns the columns on 2 ends.

justiffy-columns-evenly aligns s the columns with an even amount of spaces between them.

Column Wrapping

Columns will automatically wrap to the next line if they overflow the width fo the row.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col-9">.col-9</div>  
    <div class="col-4">.col-4</div>  
    <div class="col-6">.col-6</div>  
  </div>  
</div>

And we’ll see the last 2 columns be on the line after the first since they overflow the 12 column grid.

Column Breaks

We can force columns to display on the next line with a column break element.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col-6 col-sm-2">.col-6 .col-sm-2</div>  
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>  
  
    <div class="w-100"></div>  
  
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>  
    <div class="col-6 col-sm-2">.col-6 .col-sm-2</div>  
  </div>  
</div>

to force the last 2 columns on the next line with the div with the w-100 class.

Conclusion

We can add column breaks to force columns to the next line.

We can also nest columns and align them vertically or horizontally.