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:
noneinlineinline-blockblocktabletable-celltable-rowflexinline-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.
