Display & Flexbox Utilities
Learn Bootstrap's display utilities like .d-flex and .d-none, and the flexbox alignment classes justify-content-* and align-items-*.
Introduction
Beyond spacing, two of the most powerful utility groups in Bootstrap control how elements are displayed and how they are aligned using flexbox. The `display` utilities let you show, hide, or change an element's box behavior, while the flexbox utilities give you full control over layout direction and alignment — all without leaving your HTML.
- How .d-flex, .d-none, and other display classes work.
- How to hide/show elements responsively.
- How to build flex layouts with justify-content and align-items.
- How to control wrapping and item sizing inside a flex container.
Display Utility Classes
The `.d-*` classes map directly to CSS `display` values. They let you toggle an element between block, inline, flex, grid, or completely hidden — the most common one being `.d-none`, which sets `display: none;`.
| Class | CSS display value |
|---|---|
| .d-none | none |
| .d-inline | inline |
| .d-inline-block | inline-block |
| .d-block | block |
| .d-flex | flex |
| .d-inline-flex | inline-flex |
| .d-grid | grid |
<div class="d-none">You will never see this box.</div><div class="d-block bg-light border p-2">A block-level box.</div><span class="d-inline-block bg-primary text-white p-2">Inline-block span</span>Click Run to see what this code prints.
Responsive Display
Display classes accept a breakpoint infix, which is exactly how you build responsive show/hide behavior, like hiding a sidebar on mobile or showing a mobile-only menu button.
<div class="d-none d-md-block bg-info text-white p-2"> Hidden on mobile, visible from md breakpoint up.</div><div class="d-block d-md-none bg-warning p-2"> Visible on mobile only, hidden from md up.</div>Click Run to see what this code prints.
Enabling Flexbox
Applying `.d-flex` (or `.d-inline-flex`) to a container turns on flexbox for its direct children. Once flexbox is enabled, Bootstrap's other flex utilities become available to control direction, alignment, and wrapping.
<div class="d-flex bg-light border p-2"> <div class="p-2 bg-primary text-white">Item 1</div> <div class="p-2 bg-primary text-white">Item 2</div> <div class="p-2 bg-primary text-white">Item 3</div></div>Click Run to see what this code prints.
Flex Direction
By default, flex items lay out in a row. The `.flex-*` direction classes let you switch to a column, or reverse the order entirely.
<div class="d-flex flex-column bg-light border p-2"> <div class="p-2 bg-secondary text-white mb-1">Top</div> <div class="p-2 bg-secondary text-white mb-1">Middle</div> <div class="p-2 bg-secondary text-white">Bottom</div></div>Click Run to see what this code prints.
Justify Content
`justify-content-*` aligns flex items along the main axis (horizontally, in a row layout). This is the go-to way to space out navbar items or center a group of buttons.
<div class="d-flex justify-content-between bg-light border p-2"> <span class="badge bg-primary">Left</span> <span class="badge bg-primary">Middle</span> <span class="badge bg-primary">Right</span></div>Click Run to see what this code prints.
Align Items & Align Self
`align-items-*` aligns flex items along the cross axis (vertically, in a row layout), applied to the parent container. `align-self-*` overrides that alignment for a single child.
<div class="d-flex align-items-center" style="height: 120px;"> <div class="p-2 bg-primary text-white">Centered vertically</div> <div class="p-2 bg-primary text-white align-self-start">Aligned to top</div></div>Click Run to see what this code prints.
Flex Wrap
By default flex items try to fit on a single line, shrinking if necessary. `.flex-wrap` allows items to wrap onto multiple lines once they run out of horizontal space, which is essential for tag lists or button groups on small screens.
<div class="d-flex flex-wrap gap-2" style="max-width: 300px;"> <span class="badge bg-secondary">HTML</span> <span class="badge bg-secondary">CSS</span> <span class="badge bg-secondary">JavaScript</span> <span class="badge bg-secondary">Bootstrap</span> <span class="badge bg-secondary">React</span></div>Click Run to see what this code prints.
Flex Grow, Shrink & Basic Sizing
The `.flex-fill`, `.flex-grow-1`, and `.flex-shrink-0` classes control how individual items expand or resist shrinking inside a flex container — handy for making one item (like a search input) fill the remaining space.
<div class="d-flex bg-light border p-2"> <div class="p-2 bg-secondary text-white">Fixed</div> <div class="p-2 bg-primary text-white flex-grow-1">Grows to fill space</div></div>Click Run to see what this code prints.
Common Mistakes
- Applying justify-content-* or align-items-* to an element that isn't a flex container — they have no effect without d-flex first.
- Using d-none to hide content that should still exist for screen readers — consider visually-hidden instead when content must stay accessible.
- Forgetting flex-wrap when packing many items into a flex row on small screens, causing overflow.
- Confusing justify-content (main axis) with align-items (cross axis) and getting unexpected alignment.
Best Practices
- Use d-flex + gap-* together instead of adding margin to every flex child.
- Pair responsive display classes (d-none d-lg-block) to build mobile/desktop-specific UI without JavaScript.
- Use flex-wrap on any flex row that might contain a variable number of items.
- Reach for align-self only when a single item needs different alignment than its siblings.
- Prefer the grid system for page-level layout and flex utilities for smaller component-level layout.
Frequently Asked Questions
Yes for page layout — the grid handles responsive column widths and gutters more cleanly. Flex utilities shine for smaller, component-level alignment like navbar items or card footers.
.d-none removes the element from layout entirely (display: none), while visibility: hidden keeps its space reserved but makes it invisible. Bootstrap only ships a display utility, not a visibility one.
Yes, classes like flex-row and flex-wrap combine freely, and Bootstrap even offers shorthand combinations like flex-md-row for responsive direction changes.
Double-check the container has d-flex applied — justify-content only affects direct children of a flex or inline-flex container.
Key Takeaways
- Display utilities (.d-flex, .d-none, .d-block) map directly to CSS display values.
- Display classes support responsive infixes for show/hide-by-breakpoint behavior.
- .d-flex turns on flexbox for direct children.
- justify-content-* controls the main axis; align-items-* controls the cross axis.
- flex-wrap allows items to move to a new line instead of overflowing or shrinking.
- flex-grow-1 and flex-fill let an item expand to consume leftover space.
Summary
Display and flexbox utilities give you a huge amount of layout control without writing a single custom CSS rule. Combined with the spacing utilities from the previous lesson, you can now build most simple component layouts entirely from Bootstrap classes. Next, you'll put these skills to work styling your first interactive component: buttons.