Bootstrap Flex

Bootstrap Flex Overview

Adding .d-flex (or d-inline-flex) to an element turns it into a flex container, after which flex-direction utilities like flex-row and flex-column control the main axis, and justify-content/align-items utilities control alignment along the main and cross axes respectively.

Individual flex items can grow, shrink, or stay fixed in size using flex-grow-1, flex-shrink-0, or flex-fill, and the gap utility provides consistent spacing between flex items without relying on margins on every child element.

Bootstrap Flex Example

<div class="d-flex justify-content-between align-items-center p-3 bg-light rounded">
  <span class="fw-bold">Dashboard</span>
  <button class="btn btn-primary btn-sm">New Item</button>
</div>

<div class="d-flex flex-column flex-md-row gap-3 mt-3">
  <div class="flex-fill p-3 bg-white border rounded">Panel A</div>
  <div class="flex-fill p-3 bg-white border rounded">Panel B</div>
</div>

The first flex container spreads its two children apart with justify-content-between while vertically centering them with align-items-center. The second example stacks two panels vertically on mobile and switches to a horizontal row on medium screens and up, using flex-fill so both panels share equal width and gap-3 for consistent spacing without extra margin classes.

Top 10 Bootstrap Flex Examples

These are the flexbox utility patterns you'll use constantly for toolbars, cards, and alignment.

Popular Real-World Bootstrap Flex Examples

These flex patterns are the backbone of toolbars, headers, and alignment-driven components.

Best Practices

• Use gap-* utilities for spacing between flex children instead of adding margin to every item.
• Combine flex-column and flex-md-row (or similar) for layouts that stack on mobile and align on desktop.
• Use flex-fill or flex-grow-1 for children that should share available space evenly.
• Reach for align-items-center whenever vertical centering inside a flex row is needed.
• Use flex-wrap for tag or chip lists that need to wrap naturally onto multiple lines.
• Prefer flex utilities over the grid system for simple one-dimensional alignment problems.
• Test flex layouts with varying content lengths to ensure alignment holds up with real data.

Common Mistakes

• Forgetting d-flex on the parent, so child alignment utilities like align-items-center have no effect.
• Using flex-grow-1 on multiple items without flex-basis considerations, causing uneven growth in edge cases.
• Adding manual margins between flex children when gap-* would be simpler and more consistent.
• Mixing the grid system and flex utilities unnecessarily for what is really a simple one-axis layout.
• Not testing flex-wrap behavior with a large number of items, resulting in messy wrapping.
• Overriding flex direction responsively but forgetting to also adjust alignment utilities to match.

Key Takeaways

• d-flex or d-inline-flex establishes a flex formatting context on any element.
• flex-direction, justify-content, and align-items control layout along both flex axes.
• gap-* utilities provide consistent spacing between flex children.
• flex-fill, flex-grow-1, and flex-shrink-0 control how individual items size themselves.
• Responsive flex utilities let a single layout adapt direction and alignment across breakpoints.