Categories
Bootstrap HTML

Bootstrap 5 — Gutters and Utility Classes

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *