Sections

Justify content

Utilities for controlling how flex items are positioned along a container’s main axis.

Class Properties
.justify-content-start justify-content: flex-start;
.justify-content-center justify-content: center;
.justify-content-end justify-content: flex-end;
.justify-content-between justify-content: space-between;
.justify-content-around justify-content: space-around;

Usage

Start

Use .justify-content-start to justify items against the start of the flex container’s main axis.

1
2
3
<div class="flex justify-content-start bg-gray-200">
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

Center

Use .justify-content-center to justify items along the center of the flex container’s main axis.

1
2
3
<div class="flex justify-content-center bg-gray-200">
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

End

Use .justify-content-end to justify items against the end of the flex container’s main axis.

1
2
3
<div class="flex justify-content-end bg-gray-200">
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

Space between

Use .justify-content-between to justify items along the flex container’s main axis such that there is an equal amount of space between each item.

1
2
3
<div class="flex justify-content-between bg-gray-200">
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

Space around

Use .justify-content-around to justify items along the flex container’s main axis such that there is an equal amount of space around each item.

1
2
3
<div class="flex justify-content-around bg-gray-200">
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

Variants

By default, only responsive variants are generated for justify content utilities.

Responsive

To control the justification of flex content at a specific breakpoint, add a {screen}: prefix to any existing justify content utility.

For example, use .md:justify-content-between to apply the justify-content-between utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:justify-content-between, add "justify-content" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "justify-content",
);