Align content

The align content class sets the align-content property. It controls how extra space is distributed between items in a flex or grid container along the cross axis.

Overview

align-content-around

align-content: space-around;

align-content-between

align-content: space-between;

align-content-evenly

align-content: space-evenly;

align-content-center

align-content: center;

align-content-start

align-content: start;

align-content-end

align-content: end;

Examples

Around
align-content-around

Rows are evenly spaced along the cross axis with equal space around each line. This results in half-sized gaps at the start and end of the container.

In row layouts, the spacing appears vertically between rows.
In column layouts, the spacing appears horizontally between columns.

<div class="d-flex align-content-around">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Between
align-content-between

Rows are evenly space along the cross axis with equal space between each line. There’s no space at the start or end of the container.

In row layouts, the spacing appears vertically between rows.
In column layouts, the spacing appears horizontally between columns.

<div class="d-flex align-content-between">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Evenly
align-content-evenly

Rows are evenly spaced along the cross axis with equal space between all lines and the container edges, including the start and end.

In row layouts, the spacing appears vertically between rows.
In column layouts, the spacing appears horizontally between columns.

<div class="d-flex align-content-evenly">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Centre
align-content-center

Rows are grouped together and centred along the cross axis within the container, with equal space above and below the entire group.

In row layouts, the rows are centred vertically.
In column layouts, the columns are centred horizontally.

<div class="d-flex align-content-center">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Start
align-content-start

Rows are grouped together at the start of the cross axis within the container. It leaves any extra space at the end of the container.

In row layouts, the rows align to the top of the container.
In column layouts, the columns align to the left of the container.

<div class="d-flex align-content-start">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

End
align-content-end

Rows are grouped together at the end of the cross axis within the container. It leaves any extra space at the beginning of the container.

In row layouts, the rows align to the bottom of the container.
In column layouts, the rows align to the right of the container.

<div class="d-flex align-content-end">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</div>

Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:

• xs: > 480px
• sm: > 640px
• md: > 768px
• lg: > 1024px
• xl: > 1280px

  
<div class="xs:align-content-center ...">
  ...
</div>
  

Learn more about the responsive layout prefix.