Bootstrap Flexbox, Display & Positioning — Layout Utilities

Beyond the grid system, Bootstrap provides powerful layout utilities that give you fine-grained control over element positioning, alignment, and visibility. These utilities are built on CSS Flexbox and CSS Positioning — mastering them allows you to create complex, responsive layouts without writing custom CSS.

1. Flexbox Utilities

Bootstrap's flexbox utilities are the foundation of modern layouts. They control alignment, ordering, and spacing of elements within a container.

Enable Flexbox

Use .d-flex or .d-inline-flex to create a flex container.

<!-- Block-level flex container -->
<div class="d-flex">...</div>

<!-- Inline-level flex container -->
<div class="d-inline-flex">...</div>

<!-- Responsive flex containers -->
<div class="d-md-flex">...</div> <!-- Only flex on medium screens and up -->
<div class="d-flex d-sm-none">...</div> <!-- Flex only on small screens -->

Flex Direction

Control the direction of flex items using .flex-row, .flex-row-reverse, .flex-column, or .flex-column-reverse.

<!-- Horizontal (default) -->
<div class="d-flex flex-row">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
<!-- Output: 1 2 3 -->

<!-- Horizontal reversed -->
<div class="d-flex flex-row-reverse">...</div>
<!-- Output: 3 2 1 -->

<!-- Vertical -->
<div class="d-flex flex-column">...</div>
<!-- Output:
1
2
3 -->

<!-- Responsive flex direction -->
<div class="d-flex flex-column flex-md-row">...</div>
<!-- Vertical on mobile, horizontal on medium screens -->

Justify Content — Horizontal Alignment

Align flex items along the main axis (horizontal by default).

<!-- Center items -->
<div class="d-flex justify-content-center">...</div>

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

<!-- Responsive justify -->
<div class="d-flex justify-content-center justify-content-md-start">...</div>

Align Items — Vertical Alignment

Align flex items along the cross axis (vertical by default).

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

<!-- Stretch items to fill height -->
<div class="d-flex align-items-stretch" style="height: 200px;">
    <div>Stretched</div>
</div>

Align Self — Individual Item Alignment

Override the container's alignment for a specific flex item.

<div class="d-flex align-items-center" style="height: 200px;">
    <div>Default (center)</div>
    <div class="align-self-start">Start</div>
    <div class="align-self-end">End</div>
    <div class="align-self-stretch">Stretch</div>
</div>

Flex Wrap

Control whether flex items wrap to the next line.

<!-- No wrap (default) -->
<div class="d-flex flex-nowrap">...</div>

<!-- Wrap to next line -->
<div class="d-flex flex-wrap">...</div>

<!-- Wrap reversed -->
<div class="d-flex flex-wrap-reverse">...</div>

Flex Grow & Shrink

Control how flex items grow or shrink to fill available space.

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

<!-- Prevent shrinking -->
<div class="flex-shrink-0">I don't shrink</div>

Gap

Add space between flex items using .gap-{size}.

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

<!-- Responsive gap -->
<div class="d-flex gap-2 gap-md-4">...</div>

Order

Change the visual order of flex items.

<div class="d-flex">
    <div class="order-3">Third visually</div>
    <div class="order-1">First visually</div>
    <div class="order-2">Second visually</div>
</div>

<!-- Responsive ordering -->
<div class="d-flex flex-column flex-md-row">
    <div class="order-2 order-md-1">Changes order on different screens</div>
</div>

2. Display Utilities

Display utilities control an element's visibility and layout behavior.

Basic Display Classes

Responsive Display

Show or hide elements at specific breakpoints.

<!-- Hidden on mobile, visible on larger screens -->
<div class="d-none d-md-block">Visible on medium screens and up</div>

<!-- Visible on mobile, hidden on larger screens -->
<div class="d-block d-md-none">Visible only on small screens</div>

<!-- Hidden on all screens -->
<div class="d-none">Always hidden</div>

<!-- Visible on all screens -->
<div class="d-block">Always visible</div>

<!-- Responsive flex: flex on large screens only -->
<div class="d-flex d-lg-flex">Flex on large screens</div>

Visibility Utilities

Control visibility without affecting layout.

<!-- Invisible (hidden but still takes up space) -->
<div class="invisible">I'm invisible but still here</div>

<!-- Visible (default) -->
<div class="visible">I'm visible</div>

Common Display Use Cases

<!-- Mobile-first navigation toggle -->
<button class="d-md-none">Menu (only on mobile)</button>

<!-- Desktop-only sidebar -->
<div class="d-none d-lg-block">Desktop sidebar</div>

<!-- Centered block -->
<div class="d-block mx-auto" style="width: 200px;">Centered block</div>

3. Positioning Utilities

Positioning utilities control how elements are positioned in the document flow.

Position Classes

Absolute Positioning

Use .position-absolute with top/start/end/bottom utilities.

<div class="position-relative" style="height: 200px; background: #eee;">
    <!-- Parent must be position-relative -->
    <div class="position-absolute top-0 start-0 p-2 bg-primary text-white">
        Top Left
    </div>
    <div class="position-absolute top-0 end-0 p-2 bg-success text-white">
        Top Right
    </div>
    <div class="position-absolute bottom-0 start-0 p-2 bg-danger text-white">
        Bottom Left
    </div>
    <div class="position-absolute bottom-0 end-0 p-2 bg-warning text-dark">
        Bottom Right
    </div>
    <div class="position-absolute top-50 start-50 translate-middle p-2 bg-dark text-white">
        Center
    </div>
</div>

Translate Utilities

Center elements using .translate-middle with .top-50 and .start-50.

<!-- Perfect center -->
<div class="position-absolute top-50 start-50 translate-middle">
    Centered content
</div>

<!-- Center in x-axis only -->
<div class="position-absolute top-0 start-50 translate-middle-x">
    Centered horizontally
</div>

<!-- Center in y-axis only -->
<div class="position-absolute top-50 start-0 translate-middle-y">
    Centered vertically
</div>

Fixed & Sticky Positioning

<!-- Fixed to top -->
<div class="position-fixed top-0 start-0 w-100 bg-primary text-white p-3">
    Fixed header
</div>

<!-- Fixed to bottom -->
<div class="position-fixed bottom-0 start-0 w-100 bg-dark text-white p-3">
    Fixed footer
</div>

<!-- Sticky top -->
<div class="position-sticky top-0 bg-white shadow p-3">
    Sticky header (sticks when scrolling past)
</div>

Position Coordinates

Use .top-0, .start-0, .end-0, .bottom-0 with position utilities.

<div class="position-relative" style="height: 300px;">
    <div class="position-absolute top-0 start-0">Top Left</div>
    <div class="position-absolute top-0 end-0">Top Right</div>
    <div class="position-absolute bottom-0 start-0">Bottom Left</div>
    <div class="position-absolute bottom-0 end-0">Bottom Right</div>
    <div class="position-absolute top-50 start-50 translate-middle">Center</div>
</div>

Z-Index Utilities

Control stacking order using .z-{index}.

<div class="position-relative" style="height: 100px;">
    <div class="position-absolute top-0 start-0 bg-primary p-3 z-1">Z-index 1</div>
    <div class="position-absolute top-0 start-2 bg-danger p-3 z-2">Z-index 2 (on top)</div>
    <div class="position-absolute top-0 start-4 bg-success p-3 z-0">Z-index 0 (behind)</div>
</div>

Common Layout Patterns

1. Centering Content

<!-- Centered horizontally and vertically -->
<div class="d-flex justify-content-center align-items-center" style="height: 400px;">
    <div>Centered content</div>
</div>

2. Sticky Footer

<div class="d-flex flex-column min-vh-100">
    <header class="bg-primary text-white p-3">Header</header>
    <main class="flex-grow-1 p-3">Content</main>
    <footer class="bg-dark text-white p-3 mt-auto">Footer</footer>
</div>

3. Sidebar Layout

<div class="d-flex">
    <div class="bg-light p-3" style="width: 250px;">Sidebar</div>
    <div class="flex-grow-1 p-3">Main content</div>
</div>

4. Mobile-Friendly Navbar

<nav class="d-flex flex-wrap justify-content-between align-items-center p-3 bg-dark">
    <a href="#" class="text-white text-decoration-none fs-4">Brand</a>
    <div class="d-none d-md-flex gap-3">
        <a href="#" class="text-white">Home</a>
        <a href="#" class="text-white">About</a>
        <a href="#" class="text-white">Contact</a>
    </div>
    <button class="d-md-none btn btn-outline-light">Menu</button>
</nav>