Align Content
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.
👉
flex
,
direction
,
grow
,
shrink
,
wrap
,
align-items
,
align-self
,
align-content
,
justify-content
,
place-content
,
order
|
Class
|
Properties
|
|---|---|
| align-content-start | |
| align-content-end | |
| align-content-center | |
| align-content-around | |
| align-content-between | |
| align-content-evenly | |
| align-content-stretch |
Start
Use the .flex-grow-1 class on any flex element to fill all the available space, while allowing the remaining two flex items their necessary space.
1
2
3
4
5
6
7
<div class="d-flex flex-wrap align-content-start">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
End
1
2
3
4
5
6
7
<div class="d-flex flex-wrap align-content-end">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Center
1
2
3
4
5
6
7
<div class="d-flex flex-wrap align-content-center">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Around
1
2
3
4
5
6
7
<div class="d-flex flex-wrap align-content-around">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Between
1
2
3
4
5
6
7
<div class="d-flex flex-wrap align-content-between">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Evenly
1
2
3
4
5
6
7
<div class="d-flex flex-wrap align-content-evenly">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Stretch
1
2
3
4
5
6
7
<div class="d-flex flex-wrap align-content-stretch">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Responsive
Responsive variations also exist for each align-content value. Use the .align-content-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing align-content utility.
<div class="align-content-md-center ..."></div>