# How to Justify Content in Bootstrap: A Complete Guide to Flexbox Utilities
> Learn how to justify content in Bootstrap using Flexbox utilities. Easily align items horizontally without custom CSS. Master Bootstrap's alignment classes now.
- Repository: [Bootstrap/bootstrap](https://github.com/twbs/bootstrap)
- Tags: how-to-guide
- Published: 2026-02-13
---
**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`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/_utilities.scss)
In [[`scss/_utilities.scss`](https://github.com/twbs/bootstrap/blob/main/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)](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:
```html
Item 1
Item 2
```
For navigation layouts requiring space between branding and menu items:
```html
```
### Responsive Justification
Control alignment differently across viewport sizes by combining breakpoint variants:
```html
Left Content
Right Content
```
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:
```html
Column 1
Column 2
```
## 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:
```css
.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`](https://github.com/twbs/bootstrap/blob/main/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)](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)](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`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/scss/_navbar.scss) and [`scss/_modal.scss`](https://github.com/twbs/bootstrap/blob/main/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`](https://github.com/twbs/bootstrap/blob/main/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.