How to Justify Content in Bootstrap: A Complete Guide to Flexbox Utilities

Bootstrap provides utility classes like justify-content-center and justify-content-between to align flex items horizontally without writing custom CSS.

The Bootstrap framework includes a comprehensive utility-first system for controlling flexbox alignment directly from your HTML. By leveraging the source code in scss/_utilities.scss, you can distribute space between items using predefined classes that work across all breakpoints.

Understanding Bootstrap's Justify Content Utilities

The foundation of Bootstrap's justify content capabilities resides in its SCSS utility API. According to the twbs/bootstrap source code, these utilities are generated dynamically rather than hard-coded, ensuring consistency and responsiveness.

The Utility Map in _utilities.scss

In [scss/_utilities.scss](https://github.com/twbs/bootstrap/blob/main/scss/_utilities.scss) at line 288, the framework declares a justify-content entry within the $utilities map. This configuration instructs the build system to generate CSS classes for each value defined in the nested values map, including start, end, center, between, around, and evenly.

Responsive Breakpoints Integration

Because the utility generator processes these values alongside the $breakpoints map defined in [scss/_variables.scss](https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss), Bootstrap automatically creates responsive variants. This architecture produces classes like justify-content-sm-center and justify-content-md-between without manual CSS authoring.

Available Justify Content Classes

Bootstrap generates the following classes to control horizontal alignment in flex containers:

• .justify-content-start – Aligns items to the start (left in LTR)
• .justify-content-end – Aligns items to the end (right in LTR)
• .justify-content-center – Centers items horizontally
• .justify-content-between – Distributes items evenly with the first item at the start and last at the end
• .justify-content-around – Distributes items with equal space around them
• .justify-content-evenly – Distributes items with equal space between, around, and at the edges

Each class is also available in responsive variants following the pattern .justify-content-{breakpoint}-{value}.

Practical Implementation Examples

To use these utilities, apply them to any element that functions as a flex container. The classes rely on display: flex being present, either through the d-flex utility or Bootstrap's grid system.

Basic Flex Container Alignment

Create a centered flex container using the core utility:

<div class="d-flex justify-content-center">
  <div class="p-2">Item 1</div>
  <div class="p-2">Item 2</div>
</div>

For navigation layouts requiring space between branding and menu items:

<nav class="navbar d-flex justify-content-between">
  <a class="navbar-brand" href="#">Brand</a>
  <ul class="navbar-nav d-flex">
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
  </ul>
</nav>

Responsive Justification

Control alignment differently across viewport sizes by combining breakpoint variants:

<div class="d-flex justify-content-sm-center justify-content-md-between">
  <div class="p-2">Left Content</div>
  <div class="p-2">Right Content</div>
</div>

This example centers content on small screens (sm) but switches to space-between distribution on medium screens and above.

Grid System Integration

When working with Bootstrap's grid, apply justify content utilities directly to .row elements to align columns:

<div class="row justify-content-around">
  <div class="col-4">Column 1</div>
  <div class="col-4">Column 2</div>
</div>

How It Works Under the Hood

The generated CSS follows a strict pattern enforced by the utility API. Each class applies !important to ensure specificity over component styles:

.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }

The !important flag guarantees that utility classes override any custom component styles, maintaining predictable alignment behavior. The source generator in scss/_utilities.scss handles the repetitive mapping of values to CSS output, ensuring that when new values are added to the map, the corresponding classes compile automatically.

Real-World Usage in Bootstrap Components

The framework uses these utilities internally for its own components. In [scss/_navbar.scss](https://github.com/twbs/bootstrap/blob/main/scss/_navbar.scss) at line 34, the navbar component utilizes justify-content: space-between to separate brand elements from navigation links. Similarly, the modal footer in [scss/_modal.scss](https://github.com/twbs/bootstrap/blob/main/scss/_modal.scss) at line 165 applies justify-content: flex-end to align action buttons to the right.

These implementations demonstrate that justify content in Bootstrap is not merely a user-facing utility but a core architectural pattern used throughout the framework's component library.

Summary

• Bootstrap's justify content utilities are defined in scss/_utilities.scss and generated from a centralized map that includes values like center, between, and around.
• Responsive variants automatically compile for every breakpoint defined in scss/_variables.scss, following the naming convention .justify-content-{breakpoint}-{value}.
• Flex container requirement: These classes only affect elements with display: flex, available via d-flex or Bootstrap's grid classes.
• Internal usage: Components like navbars and modals rely on these same utilities, as seen in scss/_navbar.scss and scss/_modal.scss.
• CSS output: Generated classes use !important to ensure they override component-specific styles.

Frequently Asked Questions

Do I need to use d-flex with justify content classes?

Yes. Justify content utilities only affect flex containers. You must apply d-flex to the parent element, or use a component that already has display: flex applied, such as .row in the grid system. Without flex display, the justify-content property has no visible effect on layout.

What are all the available justify content values in Bootstrap?

Bootstrap supports six primary values: start (default), end, center, between (space-between), around (space-around), and evenly (space-evenly). Each generates a corresponding class (e.g., .justify-content-between) and responsive variants for all breakpoints defined in the $breakpoints map.

Can I use justify content utilities with the Bootstrap grid?

Absolutely. The .row class uses display: flex, making it compatible with justify content utilities. Apply classes like .justify-content-center or .justify-content-around directly to .row elements to align columns within the grid container. The grid integration is managed through scss/bootstrap-grid.scss.

How do I center content only on mobile devices?

Use the responsive breakpoint syntax: justify-content-center applies to all screen sizes, while justify-content-sm-center applies only from the small breakpoint upward. To center only on mobile and revert on larger screens, use justify-content-center justify-content-md-start, which centers by default but aligns to the start on medium screens and above.

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