Bootstrap 5 Flexbox
Creating flexible and responsive layouts with ease
📐 What is Bootstrap Flex?
Bootstrap Flexbox utilities help you create flexible layouts quickly. Use simple classes to align, justify, and arrange elements horizontally or vertically without writing custom CSS, making responsive design effortless.
<!-- Basic flex container -->
<div class="d-flex">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Output:
Flex Utilities
Direction
Control flex direction
<div class="d-flex flex-row">Justify Content
Align items horizontally
<div class="d-flex justify-content-center">Align Items
Align items vertically
<div class="d-flex align-items-center">Wrap
Control item wrapping
<div class="d-flex flex-wrap">🔹 Flex Direction
The .flex-row and .flex-column classes are fundamental for controlling the main axis of a flex container. .flex-row aligns items horizontally (left to right), while .flex-column stacks them vertically. Their reversed counterparts, .flex-row-reverse and .flex-column-reverse, flip the visual order of items without changing the HTML source order. This is powerful for responsive design; for example, you can use .flex-column on mobile to stack elements and .flex-row on desktop to align them side-by-side, creating layouts that adapt to available space.
<!-- Horizontal direction (default) -->
<div class="d-flex flex-row border p-2 mb-3">
<div class="p-2 bg-primary text-white">Item 1</div>
<div class="p-2 bg-secondary text-white">Item 2</div>
<div class="p-2 bg-success text-white">Item 3</div>
</div>
<!-- Vertical direction -->
<div class="d-flex flex-column border p-2">
<div class="p-2 bg-primary text-white">Item 1</div>
<div class="p-2 bg-secondary text-white">Item 2</div>
<div class="p-2 bg-success text-white">Item 3</div>
</div>Output:
🔹 Justify Content
The .justify-content-* utilities distribute flex items along the main axis (horizontal for rows, vertical for columns). Key values include start (default), end, center, between (items spaced with equal space between them), and around (equal space around each item). These classes solve common alignment challenges, such as centering a navigation bar, pushing items to opposite ends of a container, or creating evenly spaced button groups, all without the need for manual margin calculations or complex CSS, ensuring clean and maintainable layout code.
<!-- Center alignment -->
<div class="d-flex justify-content-center border p-2 mb-3">
<div class="p-2 bg-primary text-white">Centered</div>
</div>
<!-- Space between items -->
<div class="d-flex justify-content-between border p-2 mb-3">
<div class="p-2 bg-primary text-white">Start</div>
<div class="p-2 bg-secondary text-white">End</div>
</div>
<!-- Space around items -->
<div class="d-flex justify-content-around border p-2">
<div class="p-2 bg-success text-white">Item 1</div>
<div class="p-2 bg-info text-white">Item 2</div>
<div class="p-2 bg-warning text-dark">Item 3</div>
</div>Output:
🔹 Align Items
Control the alignment of flex items along the cross axis (vertical for rows, horizontal for columns) with .align-items-* classes. Use start to align items to the top, end to the bottom, center for perfect vertical centering—a classic CSS challenge now solved with one class. stretch makes items fill the container's height, and baseline aligns text baselines. These utilities are essential for creating visually balanced interfaces, like aligning icons with text labels or ensuring cards in a row have equal heights, enhancing the polish of your design.
<!-- Center align items -->
<div class="d-flex align-items-center border p-2" style="height: 100px;">
<div class="p-2 bg-primary text-white">Centered</div>
<div class="p-2 bg-secondary text-white">Vertically</div>
</div>
<!-- Start align items -->
<div class="d-flex align-items-start border p-2 mt-3" style="height: 100px;">
<div class="p-2 bg-success text-white">Top</div>
<div class="p-2 bg-info text-white">Aligned</div>
</div>Output:
🔹 Flex Wrap
The .flex-wrap class allows flex items to wrap onto multiple lines when they exceed the container's width, which is critical for responsive behavior. Its counterpart, .flex-nowrap (default), forces all items onto a single line, potentially causing overflow. .flex-wrap-reverse wraps items but in a reversed order. This control is vital for galleries, button groups, or grid-like layouts where items should flow naturally and responsively. On narrow screens, wrapping prevents horizontal scrolling and ensures content remains accessible, creating a better mobile user experience.
<!-- Flex wrap enabled -->
<div class="d-flex flex-wrap border p-2">
<div class="p-2 bg-primary text-white">Item 1</div>
<div class="p-2 bg-secondary text-white">Item 2</div>
<div class="p-2 bg-success text-white">Item 3</div>
<div class="p-2 bg-danger text-white">Item 4</div>
<div class="p-2 bg-warning text-dark">Item 5</div>
<div class="p-2 bg-info text-white">Item 6</div>
</div>Output:
🔹 Flex Grow and Shrink
Fine-tune how flex items consume available space with .flex-grow-* and .flex-shrink-* utilities. An item with .flex-grow-1 will expand to fill any remaining space in the container, useful for creating fluid layouts where a main content area stretches. Conversely, .flex-shrink-1 allows an item to shrink if necessary to prevent overflow. By default, items can shrink but not grow. These properties give you precise control over the fluidity of your layouts, enabling designs where certain elements have fixed widths while others adapt dynamically to the viewport size.
<div class="d-flex border p-2">
<div class="p-2 bg-primary text-white">Normal</div>
<div class="p-2 bg-secondary text-white flex-grow-1">Grows to fill space</div>
<div class="p-2 bg-success text-white">Normal</div>
</div>Output:
🔹 Responsive Flexbox
All flex utilities are available with responsive breakpoint modifiers. You can apply different flex behaviors at different screen sizes using classes like .d-sm-flex, .flex-md-row, or .justify-content-lg-center. This allows you to build sophisticated, adaptive layouts. For example, you can create a vertical stack of items on mobile (.flex-column) that becomes a horizontal, space-between navigation bar on desktop (.flex-md-row .justify-content-md-between). This responsive approach is at the heart of mobile-first design with Bootstrap, ensuring your interface is optimized for every device.
<!-- Flex on medium screens and up -->
<div class="d-md-flex justify-content-md-between border p-2">
<div class="p-2 bg-primary text-white">Responsive</div>
<div class="p-2 bg-secondary text-white">Flex</div>
<div class="p-2 bg-success text-white">Layout</div>
</div>