How to Create a Responsive Layout Using Flex CSS and Bootstrap Flex Utilities

Bootstrap’s flex utilities provide a complete set of responsive classes that map directly to CSS flex properties, allowing you to build adaptive layouts without writing custom stylesheets.

Creating a responsive layout using flex CSS and Bootstrap flex utilities enables rapid development of modern, mobile-first interfaces. The twbs/bootstrap repository ships with a comprehensive utility API defined in scss/_utilities.scss that abstracts native flexbox properties into semantic class names. These utilities work in tandem with Bootstrap’s breakpoint system to give you granular control over layout behavior across different viewport sizes.

Understanding Bootstrap's Flex Utilities

Bootstrap’s flex utilities translate raw CSS flexbox properties into human-readable classes. According to the source code in scss/_utilities.scss, the framework generates classes for display, flex-direction, flex-wrap, flex-grow, flex-shrink, justify-content, align-items, and order. Each utility supports responsive variants using the standard breakpoint prefixes (-sm-, -md-, -lg-, -xl-, -xxl-), enabling you to change flex behavior at specific screen widths.

The underlying architecture leverages Sass maps to generate these classes, ensuring consistency with the rest of Bootstrap’s utility-first approach. This system allows developers to compose complex layouts directly in HTML markup while maintaining clean, maintainable stylesheets.

Core Flex Utility Classes

Creating Flex Containers

Start any flex layout by establishing a flex context. The d-flex class applies display: flex, while d-inline-flex creates an inline flex container.

<div class="d-flex">
  <!-- Flex items -->
</div>

Controlling Direction

Use flex-row (default) or flex-column to define the main axis. Combine with breakpoints to switch layouts responsively.

<!-- Stack vertically on mobile, horizontally on tablets and up -->
<div class="d-flex flex-column flex-md-row">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Managing Wrap Behavior

Control whether flex items wrap to new lines using flex-wrap or flex-nowrap. These also support responsive prefixes.

<div class="d-flex flex-wrap">
  <!-- Items will wrap when they exceed container width -->
</div>

Sizing Flex Items

Adjust how items grow and shrink within the container:

• flex-fill – Forces items to grow equally to fill available space
• flex-grow-1 – Allows specific items to grow while others remain static
• flex-shrink-0 – Prevents items from shrinking below their content size

Alignment and Justification

Position items along the main and cross axes using justify-content-* and align-items-* classes:

• justify-content-start, center, end, between, around, evenly
• align-items-start, center, end, baseline, stretch

Apply breakpoint variants like justify-content-lg-center to adjust alignment at specific viewports.

Ordering Items

Reorder visual presentation without modifying HTML structure using order-* classes:

<div class="d-flex">
  <div class="order-2">Appears second</div>
  <div class="order-1">Appears first</div>
  <div class="order-last">Appears last</div>
</div>

Building Responsive Layouts: Practical Examples

Example 1: Direction Switching Layout

This pattern stacks content vertically on small screens and switches to horizontal on medium viewports and above:

<div class="d-flex flex-column flex-md-row gap-3">
  <div class="p-2 bg-primary text-white flex-fill">Item 1</div>
  <div class="p-2 bg-success text-white flex-fill">Item 2</div>
  <div class="p-2 bg-danger text-white flex-fill">Item 3</div>
</div>

The flex-column maintains vertical stacking on mobile devices, while flex-md-row triggers a horizontal layout at the md breakpoint. The gap-3 utility adds consistent spacing between children, and flex-fill ensures equal distribution of remaining space.

Example 2: Responsive Navigation Bar

Combine flex utilities with grid classes to create a navbar that adapts to viewport width:

<nav class="d-flex flex-wrap align-items-center justify-content-between p-3 border-bottom">
  <a href="#" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
    <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
    <span class="fs-4">MySite</span>
  </a>

  <ul class="nav col-12 col-lg-auto mb-2 justify-content-center mb-md-0">
    <li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
    <li><a href="#" class="nav-link px-2 link-dark">Features</a></li>
    <li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li>
  </ul>

  <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
    <input type="search" class="form-control" placeholder="Search…" aria-label="Search">
  </form>
</nav>

Here, flex-wrap ensures navbar components wrap on narrow viewports, while justify-content-between distributes space evenly. The col-12 col-lg-auto classes from scss/mixins/_grid.scss control width behavior responsively.

Example 3: Equal-Height Card Deck

Use flex utilities to create cards with uniform heights regardless of content length:

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col d-flex">
    <div class="card flex-fill">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Card title</h5>
        <p class="card-text flex-grow-1">This content will stretch to fill the column.</p>
        <a href="#" class="btn btn-primary mt-auto align-self-start">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

The d-flex class on the column wrapper makes the card a flex item, while flex-fill ensures it grows to match sibling heights. Inside the card body, flex-grow-1 forces the paragraph to expand, and mt-auto pushes the button to the bottom.

Key Source Files in the Bootstrap Repository

Understanding where these utilities originate helps when customizing or debugging layouts:

• scss/_utilities.scss – Contains the complete utility API mapping, including all flex-related classes and their responsive variants.
• scss/mixins/_grid.scss – Implements the flex-based grid system and column helpers that work alongside flex utilities.
• scss/helpers/_stacks.scss – Provides vertical and horizontal stack utilities built on top of flexbox.
• scss/_navbar.scss – Demonstrates real-world application of flex utilities in the navbar component.
• js/src/util/index.js – Supports interactive components that rely on flex layouts, such as collapse and offcanvas.

Summary

• Bootstrap’s flex utilities in scss/_utilities.scss provide responsive classes for every CSS flex property.
• Use d-flex to create containers and breakpoint variants like flex-md-row to control direction responsively.
• Size items with flex-fill, flex-grow-1, or flex-shrink-0 based on content requirements.
• Align content using justify-content-* and align-items-* classes with responsive prefixes.
• Reorder elements visually using order-* classes without changing HTML structure.
• Combine flex utilities with Bootstrap’s grid system for complex, adaptive layouts.

Frequently Asked Questions

How do I make a flex container responsive in Bootstrap?

Add breakpoint prefixes to any flex utility class. For example, use d-flex d-lg-inline-flex to switch between block and inline flex displays at the large breakpoint, or flex-column flex-md-row to change direction based on viewport width.

What is the difference between flex-fill and flex-grow-1 in Bootstrap?

flex-fill applies flex: 1 1 auto, forcing items to grow and shrink equally while respecting their original size proportions. flex-grow-1 applies only flex-grow: 1, allowing the item to expand but not necessarily matching the behavior of other flex-fill siblings exactly.

Can I use Bootstrap flex utilities without the grid system?

Yes, flex utilities operate independently of the grid. You can apply d-flex and related classes to any HTML element without using row or col-* classes. However, combining both systems—using flex utilities inside grid columns—often produces the most robust responsive layouts.

Where are Bootstrap’s flex utilities defined in the source code?

All flex utility classes are generated in scss/_utilities.scss within the twbs/bootstrap repository. This file contains the Sass maps that define which CSS properties each utility class controls and how they respond to different breakpoints.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}