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 add gutters and utility classes with Bootstrap 5.

Row Columns Gutters

We can add the g class to add horizontal and vertical padding to columns.

For example, we can write:

<div class="container">  
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
    <div class="col">  
      <div class="p-3 border bg-light">Row column</div>  
    </div>  
  </div>  
</div>

We have the g-2 and g-lg-3 classes to add our gutters.

g-2 lets us add a smaller gutter in breakpoints smaller than lg .

And g-lg-3 lets us add a bigger gutter if our viewport hit the lg breakpoint or larger.

Change the Gutters

We can change the buyers with some SASS code.

For example, we can write:

$grid-gutter-width: 2.5rem;  
$gutters: (  
  0: 0,  
  1: $spacer * .25,  
  2: $spacer * .5,  
  3: $spacer,  
  4: $spacer * 1.5,  
  5: $spacer * 3,  
);

to change the gutter by changing the $grid-gutter-width variables.

We can also change the $gutters map to change the width of them.

Utilities for Layout

Bootstrap 5 has display utilities for responsively toggling display of elements.

They’re indicated by .d-{value} for xs and .d-{breakpoint}-{value} for the other breakpoints.

The value can be one of:

• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex

For example, we can write:

<div class="d-inline p-2 bg-primary text-white">d-inline</div>

to display the div inline when the breakpoint is xs or higher as indicated by the d-inline class.

Hiding Elements

We can hide things with .d-none or .d-{breakpoint}-none .

.d-nonw always hides something.

.d-{breakpoint}-none hides something if the viewport hits the given breakpoint or above.

We can write them in the following way:

• Screen sizeClassHidden on all — .d-none
• Hidden only on xs — .d-none .d-sm-block
• Hidden only on sm — .d-sm-none .d-md-block
• Hidden only on md — .d-md-none .d-lg-block
• Hidden only on lg — .d-lg-none .d-xl-block
• Hidden only on xl — .d-xl-none
• Hidden only on xxl — .d-xxl-none
• Visible on all — .d-block
• Visible only on xs — .d-block .d-sm-none
• Visible only on sm — .d-none .d-sm-block .d-md-none
• Visible only on md — .d-none .d-md-block .d-lg-none
• Visible only on lg — .d-none .d-lg-block .d-xl-none
• Visible only on xl — .d-none .d-xl-block .d-xxl-none
• Visible only on xxl — .d-none .d-xxl-block

Display in Print

We can also make things only display in print.

To do that, we can add the following classes:

• .d-print-none
• .d-print-inline
• .d-print-inline-block
• .d-print-block
• .d-print-table
• .d-print-table-row
• .d-print-table-cell
• .d-print-flex
• .d-print-inline-flex

to display items that are only shown when printed in the way we want.

For instance, we can write:

<div class="d-print-none">Screen Only</div>

to add a div that hides on print only.

Conclusion

Bootstrap 5 provides us with many utility classes for displaying items our way.

Also, we can add gutters to columns to add padding.