React Justify content Utilities

Justify content

Align flex items along the main axis of a flex container.

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;

On this page

Justify content

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.

Flex item

<div className="d-flex justify-content-start">...</div>
<div className="d-flex justify-content-end">...</div>
<div className="d-flex justify-content-center">...</div>
<div className="d-flex justify-content-between">...</div>
<div className="d-flex justify-content-around">...</div>
<div className="d-flex justify-content-evenly">...</div>

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

Customizing

Sass variables

Justify content utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss

"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,
  )
),