Display and flexbox
Display utilities control how an element is shown: as a block, inline, as a flex container or not at all. Together with the flexbox classes they let you build a header, a button bar or a list row without a line of CSS.
The d-* classes
| Class | CSS |
|---|---|
d-none | display: none |
d-block | display: block |
d-inline-block | display: inline-block |
d-flex | display: flex |
d-grid | display: grid |
As with the grid, a breakpoint can go in the middle: d-md-flex applies from 768 pixels.
Showing and hiding on different screens
Combining d-none with a responsive class hides an element on some screens and shows it on others:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<p class="d-md-none">Visible only on a narrow screen</p>
<p class="d-none d-md-block">Visible only from 768 pixels</p>On a screen wider than 768 pixels you see the second paragraph, on a narrow one the first. This is how an admin dashboard hides secondary columns and labels on a phone.
A flex container
The d-flex class puts the children in a row. Alignment then uses the same words as CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="d-flex justify-content-between align-items-center border p-3">
<strong>Today's tasks</strong>
<button class="btn btn-primary btn-sm">Add</button>
</div>The heading is pushed left, the button right, and both are centered vertically. This is a typical section header of an admin dashboard.
Direction and wrapping
| Class | What it does |
|---|---|
flex-column, flex-row | Children in a column or a row |
flex-wrap | Wraps children to a new line when space runs out |
flex-grow-1 | The element takes all free space |
flex-shrink-0 | The element does not shrink |
align-self-* | Aligns one child |
Direction can be responsive too:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="d-flex flex-column flex-sm-row gap-2">
<input class="flex-grow-1" placeholder="Your email">
<button class="btn btn-primary">Subscribe</button>
</div>On a narrow screen the field and the button are stacked; from 576 pixels they are in a row, and the field stretches over all free width.
Other useful utilities
visually-hidden hides text from the screen but keeps it for screen readers. overflow-auto adds scrolling, float-end floats to the right, d-print-none hides an element when printing.
Common mistake
Putting justify-content-between or align-items-center on an element without d-flex. These properties only work on a flex or grid container, and on a regular block nothing happens. Turn flexbox on with d-flex first, then align.