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 reorder columns and add gutters with Bootstrap 5.

Reordering Columns

We can reorder columns with the .order-* classes.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col">  
      First in DOM  
    </div>  
    <div class="col order-2">  
      Second in DOM  
    </div>  
    <div class="col order-1">  
      Third in DOM  
    </div>  
  </div>  
</div>

The visual order of the 2nd and 3rd div are flipped because we applied order-2 to the 2nd div and order-1 to the 3rd div.

There are also the .order-first and .order-last classes to change the order of an element.

.order-first aligns an item as the first element.

.ordet-last aligns an item as the last element.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col order-last">  
      First in DOM  
    </div>  
    <div class="col">  
      Second in DOM  
    </div>  
    <div class="col order-first">  
      Third in DOM  
    </div>  
  </div>  
</div>

to use those classes.

Offsetting Columns

We can add offset classes to shift columns by the size of the offset.

For example, we can write:

<div class="container">  
  <div class="row">  
    <div class="col-md-4">.col-md-4</div>  
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>  
  </div>  
  <div class="row">  
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>  
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>  
  </div>  
  <div class="row">  
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>  
  </div>  
</div>

to move the columns with the offset classes.

It takes a breakpoint and the size to move.

offset-md-4 means that the column moved by 4 columns to the right if the viewport hits the md breakpoint or higher.

offset-md-3 means that the column moved by 3columns to the right if the viewport hits the md breakpoint or higher.

Margin Utilities

Bootstrap 5 comes with margin utilities.

The .mr-auto class force the sibling columns to move away from one another.

Standalone Column Classes

The .col-* classes can be used outside a .row to give an element a specific width.

Paddings are omitted if we use .col-* classes outside a .row .

For example, we can write:

<div class="col-6 bg-light p-3 border">  
  width of 50%  
</div>  
<div class="col-sm-8 bg-light p-3 border">  
  width of 67% above sm breakpoint  
</div>

We can size our columns with 50% of the width of the viewport for the first div.

The 2nd is sized 67% when it’s sm or above.

Gutters

Gutters let us add padding between columns.

We can use it to space and align content.

For example, we can write:

<div class="container px-4">  
  <div class="row gx-5">  
    <div class="col">  
     <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border">column padding</div>  
    </div>  
  </div>  
</div>

to add some padding between the 2 divs inside the row with the gx-5 class.

Also, we can add the .overflow-hidden class to do the same thing.

For example, we can write:

<div class="container overflow-hidden">  
  <div class="row gx-5">  
    <div class="col">  
     <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border">column padding</div>  
    </div>  
  </div>  
</div>

Vertical gutters

We can add vertical gutters with the .gy-* classes.

For example, we can write:

<div class="container overflow-hidden">  
  <div class="row gy-5">  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
  </div>  
</div>

We have the gy-5 class to add some padding vertically between the divs.

Horizontal and Vertical Gutters

We can combine the .gx-* and .gy-* classes to add gutters vertically and horizontally.

For example, we can write:

<div class="container">  
  <div class="row g-2">  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
    <div class="col-6">  
      <div class="p-3 border">column padding</div>  
    </div>  
  </div>  
</div>

We combined it with the g-2 class. This will give us space both horizontally and vertically.

Conclusion

We can add gutters to add space between columns.

Columns can also be reordered.