Bootstrap 5 Framework

Display and Flexbox Utilities

13 min Lesson 35 of 40

Display and Flexbox Utilities

Bootstrap provides powerful utility classes for controlling display properties and creating flexible layouts with Flexbox. These utilities enable you to build responsive layouts without writing custom CSS.

Display Utilities

Control the display property of elements with responsive display utilities:

<!-- Basic Display Classes -->
<div class="d-inline">Inline element</div>
<div class="d-inline-block">Inline-block element</div>
<div class="d-block">Block element</div>
<div class="d-flex">Flex container</div>
<div class="d-grid">Grid container</div>
<div class="d-none">Hidden element</div>

<!-- Responsive Display Utilities -->
<div class="d-none d-sm-block d-md-flex d-lg-inline-block">
    Hidden on XS, block on SM, flex on MD, inline-block on LG+
</div>

<!-- Hide on Specific Breakpoints -->
<div class="d-block d-md-none">
    Visible on mobile, hidden on desktop
</div>

<div class="d-none d-md-block">
    Hidden on mobile, visible on desktop
</div>
        

Note: Display utilities follow the format d-{value} or d-{breakpoint}-{value} for responsive behavior.

Flex Container Properties

Control the direction and wrapping behavior of flex containers:

<!-- Flex Direction -->
<div class="d-flex flex-row">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<div class="d-flex flex-row-reverse">
    Items in reverse horizontal order
</div>

<div class="d-flex flex-column">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<div class="d-flex flex-column-reverse">
    Items in reverse vertical order
</div>

<!-- Flex Wrap -->
<div class="d-flex flex-wrap">
    Multiple items that can wrap to next line
</div>

<div class="d-flex flex-nowrap">
    Items stay in one line (default)
</div>

<div class="d-flex flex-wrap-reverse">
    Items wrap in reverse order
</div>

<!-- Responsive Flex Direction -->
<div class="d-flex flex-column flex-md-row">
    Vertical on mobile, horizontal on desktop
</div>
        

Justify Content

Control horizontal alignment of flex items along the main axis:

<!-- Justify Content Classes -->
<div class="d-flex justify-content-start">
    Items aligned to start (default)
</div>

<div class="d-flex justify-content-center">
    Items centered
</div>

<div class="d-flex justify-content-end">
    Items aligned to end
</div>

<div class="d-flex justify-content-between">
    Space between items
</div>

<div class="d-flex justify-content-around">
    Space around items
</div>

<div class="d-flex justify-content-evenly">
    Equal space between all items
</div>

<!-- Responsive Justify Content -->
<div class="d-flex justify-content-start justify-content-md-center">
    Start-aligned on mobile, centered on desktop
</div>
        

Tip: justify-content-between is perfect for creating navigation bars or distributing content evenly across a container.

Align Items and Align Self

Control vertical alignment of flex items along the cross axis:

<!-- Align Items (for container) -->
<div class="d-flex align-items-start" style="height: 200px;">
    Items aligned to top
</div>

<div class="d-flex align-items-center" style="height: 200px;">
    Items vertically centered
</div>

<div class="d-flex align-items-end" style="height: 200px;">
    Items aligned to bottom
</div>

<div class="d-flex align-items-baseline">
    Items aligned by text baseline
</div>

<div class="d-flex align-items-stretch" style="height: 200px;">
    Items stretch to fill height (default)
</div>

<!-- Align Self (for individual items) -->
<div class="d-flex align-items-start" style="height: 200px;">
    <div>Item 1</div>
    <div class="align-self-center">Centered item</div>
    <div class="align-self-end">Bottom item</div>
</div>

<!-- Responsive Alignment -->
<div class="d-flex align-items-start align-items-md-center">
    Top-aligned on mobile, centered on desktop
</div>
        

Flex Item Properties

Control how individual flex items grow, shrink, and fill space:

<!-- Flex Fill -->
<div class="d-flex">
    <div class="flex-fill">Item 1 (fills available space)</div>
    <div class="flex-fill">Item 2 (fills available space)</div>
    <div>Item 3 (natural width)</div>
</div>

<!-- Flex Grow -->
<div class="d-flex">
    <div class="flex-grow-1">Grows to fill space</div>
    <div>Fixed width</div>
</div>

<div class="d-flex">
    <div class="flex-grow-0">Does not grow</div>
    <div class="flex-grow-1">Grows</div>
</div>

<!-- Flex Shrink -->
<div class="d-flex">
    <div class="flex-shrink-1">Can shrink</div>
    <div class="flex-shrink-0">Cannot shrink</div>
</div>

<!-- Order -->
<div class="d-flex">
    <div class="order-3">First in DOM, third visually</div>
    <div class="order-1">Second in DOM, first visually</div>
    <div class="order-2">Third in DOM, second visually</div>
</div>

<!-- Responsive Order -->
<div class="d-flex flex-column flex-md-row">
    <div class="order-2 order-md-1">Second on mobile, first on desktop</div>
    <div class="order-1 order-md-2">First on mobile, second on desktop</div>
</div>
        

Auto Margins with Flexbox

Use margin utilities to push flex items to specific positions:

<!-- Push to Right -->
<div class="d-flex">
    <div>Left item</div>
    <div class="ms-auto">Right item</div>
</div>

<!-- Push to Sides -->
<div class="d-flex">
    <div>Left</div>
    <div class="mx-auto">Center</div>
    <div>Right</div>
</div>

<!-- Push to Bottom (in column) -->
<div class="d-flex flex-column" style="height: 300px;">
    <div>Top content</div>
    <div class="mt-auto">Bottom content</div>
</div>

<!-- Navigation Example -->
<nav class="d-flex align-items-center p-3 bg-light">
    <div class="fw-bold">Logo</div>
    <div class="ms-auto d-flex gap-3">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </div>
</nav>
        

Tip: ms-auto (margin-start-auto) is perfect for pushing navigation items to the right in a flex container.

Practical Flexbox Layouts

Common layout patterns using flexbox utilities:

<!-- Card with Footer at Bottom -->
<div class="card" style="height: 300px;">
    <div class="card-body d-flex flex-column">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Card content</p>
        <div class="mt-auto">
            <button class="btn btn-primary">Action</button>
        </div>
    </div>
</div>

<!-- Equal Height Columns -->
<div class="row">
    <div class="col-md-4">
        <div class="d-flex flex-column h-100 p-3 bg-light">
            <h4>Feature 1</h4>
            <p class="flex-grow-1">Description</p>
            <button class="btn btn-primary">Learn More</button>
        </div>
    </div>
    <div class="col-md-4">
        <div class="d-flex flex-column h-100 p-3 bg-light">
            <h4>Feature 2</h4>
            <p class="flex-grow-1">Longer description text</p>
            <button class="btn btn-primary">Learn More</button>
        </div>
    </div>
    <div class="col-md-4">
        <div class="d-flex flex-column h-100 p-3 bg-light">
            <h4>Feature 3</h4>
            <p class="flex-grow-1">Short text</p>
            <button class="btn btn-primary">Learn More</button>
        </div>
    </div>
</div>

<!-- Centered Content -->
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
    <div class="text-center">
        <h1>Perfectly Centered</h1>
        <p>Both horizontally and vertically</p>
    </div>
</div>

<!-- Split Layout -->
<div class="d-flex flex-column flex-md-row" style="min-height: 100vh;">
    <div class="flex-fill p-4 bg-primary text-white">
        <h2>Left Side</h2>
    </div>
    <div class="flex-fill p-4">
        <h2>Right Side</h2>
    </div>
</div>
        

Gap Utilities

Bootstrap 5 includes gap utilities for flex and grid containers:

<!-- Gap Between Flex Items -->
<div class="d-flex gap-2">
    <div class="p-2 bg-light">Item 1</div>
    <div class="p-2 bg-light">Item 2</div>
    <div class="p-2 bg-light">Item 3</div>
</div>

<!-- Different Gap Sizes -->
<div class="d-flex gap-0">No gap</div>
<div class="d-flex gap-1">Small gap</div>
<div class="d-flex gap-2">Default gap</div>
<div class="d-flex gap-3">Medium gap</div>
<div class="d-flex gap-4">Large gap</div>
<div class="d-flex gap-5">Extra large gap</div>

<!-- Row and Column Gaps -->
<div class="d-flex flex-wrap row-gap-3 column-gap-2">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
</div>

<!-- Responsive Gaps -->
<div class="d-flex gap-2 gap-md-4">
    Small gap on mobile, larger on desktop
</div>
        

Note: Gap utilities eliminate the need for margin classes between flex items, resulting in cleaner markup.

Practice Exercise

Create a responsive pricing card layout:

Three pricing cards in a flex container with gap
Cards stack vertically on mobile, horizontal on desktop
Each card uses flexbox for internal layout
Features list grows to push the button to bottom
Centered pricing information
All cards have equal height on desktop

Common Mistakes:

Forgetting to add d-flex before using flex utilities
Mixing up justify-content (main axis) and align-items (cross axis)
Using align-items without setting a container height
Not considering responsive breakpoints for flex direction changes