Align content

Class	Styles
.align-content-start	align-content: flex-start;
.align-content-end	align-content: flex-end;
.align-content-center	align-content: center;
.align-content-between	align-content: space-between;
.align-content-around	align-content: space-around;
.align-content-stretch	align-content: stretch;

Overview

Use align-content utilities on flexbox containers to align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch. To demonstrate these utilities, we've enforced flex-wrap: wrap and increased the number of flex items.

Heads up! This property has no effect on single rows of flex items.

Basic usage

Start

Flex item

HTML

<div class="d-flex align-content-start flex-wrap">...</div>

End

Flex item

HTML

<div class="d-flex align-content-end flex-wrap">...</div>

Center

Flex item

HTML

<div class="d-flex align-content-center flex-wrap">...</div>

Between

Flex item

HTML

<div class="d-flex align-content-between flex-wrap">...</div>

Around

Flex item

HTML

<div class="d-flex align-content-around flex-wrap">...</div>

Stretch

Flex item

HTML

<div class="d-flex align-content-stretch flex-wrap">...</div>

Responsive

Responsive variations also exist for align-content.

.align-content-start
.align-content-end
.align-content-center
.align-content-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch
.align-content-2xl-start
.align-content-2xl-end
.align-content-2xl-center
.align-content-2xl-between
.align-content-2xl-around
.align-content-2xl-stretch

CSS

Sass utilities API

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

SCSS

"align-content": (
  responsive: true,
  property: align-content,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    stretch: stretch,
  )
),