Justify content
Use justify-content utilities to change the alignment of flex items on the main axis.
On this page
| Class | Styles |
|---|---|
| .justify-content-start | justify-content: flex-start; |
| .justify-content-end | justify-content: flex-end; |
| .justify-content-center | justify-content: center; |
| .justify-content-between | justify-content: space-between; |
| .justify-content-around | justify-content: space-around; |
| .justify-content-evenly | justify-content: space-evenly; |
Overview
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, around, or evenly.
Basic usage
Justify
Content
Start
Justify
Content
End
Justify
Content
Center
Justify
Content
Between
Justify
Content
Around
Justify
Content
Evenly
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>Responsive
Responsive variations also exist for justify-content.
.justify-content-start.justify-content-end.justify-content-center.justify-content-between.justify-content-around.justify-content-evenly.justify-content-sm-start.justify-content-sm-end.justify-content-sm-center.justify-content-sm-between.justify-content-sm-around.justify-content-sm-evenly.justify-content-md-start.justify-content-md-end.justify-content-md-center.justify-content-md-between.justify-content-md-around.justify-content-md-evenly.justify-content-lg-start.justify-content-lg-end.justify-content-lg-center.justify-content-lg-between.justify-content-lg-around.justify-content-lg-evenly.justify-content-xl-start.justify-content-xl-end.justify-content-xl-center.justify-content-xl-between.justify-content-xl-around.justify-content-xl-evenly.justify-content-2xl-start.justify-content-2xl-end.justify-content-2xl-center.justify-content-2xl-between.justify-content-2xl-around.justify-content-2xl-evenly
CSS
Sass utilities API
Justify content utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
"justify-content": (
responsive: true,
property: justify-content,
values: (
start: flex-start,
end: flex-end,
center: center,
between: space-between,
around: space-around,
evenly: space-evenly,
)
),