Align

Utilities for vertical and horizontal alignment (justify/align-items) within a flex container.

Center

Item 1
Item 2
Item 3
<div class="p-3 flex-center" style="height: 150px">
  <div class="p-2 me-1 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 text-bg-primary">Item 3</div>
</div>

Class list

Breakpoint Class
Extra small .flex-center
Small .flex-sm-center
Medium .flex-md-center
Large .flex-lg-center
Extra large .flex-xl-center
2 Extra large .flex-xxl-center
3 Extra large .flex-3xl-center
4 Extra large .flex-4xl-center
5 Extra large .flex-5xl-center

Y-center

Item 1
Item 2
Item 3
<div class="p-3 flex-y-center" style="height: 150px">
  <div class="p-2 me-1 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 text-bg-primary">Item 3</div>
</div>

Class list

Breakpoint Class
Extra small .flex-y-center
Small .flex-sm-y-center
Medium .flex-md-y-center
Large .flex-lg-y-center
Extra large .flex-xl-y-center
2 Extra large .flex-xxl-y-center
3 Extra large .flex-3xl-y-center
4 Extra large .flex-4xl-y-center
5 Extra large .flex-5xl-y-center

X-center

Item 1
Item 2
Item 3
<div class="p-3 flex-x-center" style="height: 150px">
  <div class="p-2 me-1 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 text-bg-primary">Item 3</div>
</div>

Class list

Breakpoint Class
Extra small .flex-x-center
Small .flex-sm-x-center
Medium .flex-md-x-center
Large .flex-lg-x-center
Extra large .flex-xl-x-center
2 Extra large .flex-xxl-x-center
3 Extra large .flex-3xl-x-center
4 Extra large .flex-4xl-x-center
5 Extra large .flex-5xl-x-center

Start

Item 1
Item 2
Item 3
<div class="p-3 flex-start" style="height: 150px">
  <div class="p-2 me-1 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 text-bg-primary">Item 3</div>
</div>

Class list

Breakpoint Class
Extra small .flex-start
Small .flex-sm-start
Medium .flex-md-start
Large .flex-lg-start
Extra large .flex-xl-start
2 Extra large .flex-xxl-start
3 Extra large .flex-3xl-start
4 Extra large .flex-4xl-start
5 Extra large .flex-5xl-start

End

Item 1
Item 2
Item 3
<div class="p-3 flex-end" style="height: 150px">
  <div class="p-2 me-1 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 text-bg-primary">Item 3</div>
</div>

Class list

Breakpoint Class
Extra small .flex-end
Small .flex-sm-end
Medium .flex-md-end
Large .flex-lg-end
Extra large .flex-xl-end
2 Extra large .flex-xxl-end
3 Extra large .flex-3xl-end
4 Extra large .flex-4xl-end
5 Extra large .flex-5xl-end

Between

Item 1
Item 2
Item 3
<div class="p-3 flex-between" style="height: 150px">
  <div class="p-2 me-1 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 text-bg-primary">Item 3</div>
</div>

Class list

Breakpoint Class
Extra small .flex-between
Small .flex-sm-between
Medium .flex-md-between
Large .flex-lg-between
Extra large .flex-xl-between
2 Extra large .flex-xxl-between
3 Extra large .flex-3xl-between
4 Extra large .flex-4xl-between
5 Extra large .flex-5xl-between

Around

Item 1
Item 2
Item 3
<div class="p-3 flex-around" style="height: 150px">
  <div class="p-2 me-1 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 text-bg-primary">Item 3</div>
</div>

Class list

Breakpoint Class
Extra small .flex-around
Small .flex-sm-around
Medium .flex-md-around
Large .flex-lg-around
Extra large .flex-xl-around
2 Extra large .flex-xxl-around
3 Extra large .flex-3xl-around
4 Extra large .flex-4xl-around
5 Extra large .flex-5xl-around

Top

Item 1
Item 2
Item 3
<div class="p-3 flex-top" style="height: 150px">
  <div class="p-2 me-1 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 text-bg-primary">Item 3</div>
</div>

Class list

Breakpoint Class
Extra small .flex-top
Small .flex-sm-top
Medium .flex-md-top
Large .flex-lg-top
Extra large .flex-xl-top
2 Extra large .flex-xxl-top
3 Extra large .flex-3xl-top
4 Extra large .flex-4xl-top
5 Extra large .flex-5xl-top

Bottom

Item 1
Item 2
Item 3
<div class="p-3 flex-bottom" style="height: 150px">
  <div class="p-2 me-1 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 text-bg-primary">Item 3</div>
</div>

Class list

Breakpoint Class
Extra small .flex-bottom
Small .flex-sm-bottom
Medium .flex-md-bottom
Large .flex-lg-bottom
Extra large .flex-xl-bottom
2 Extra large .flex-xxl-bottom
3 Extra large .flex-3xl-bottom
4 Extra large .flex-4xl-bottom
5 Extra large .flex-5xl-bottom

Baseline

Item 1
Item 2
Item 3
<div class="p-3 flex-baseline" style="height: 150px">
  <div class="p-2 me-1 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 text-bg-primary">Item 3</div>
</div>

Class list

Breakpoint Class
Extra small .flex-baseline
Small .flex-sm-baseline
Medium .flex-md-baseline
Large .flex-lg-baseline
Extra large .flex-xl-baseline
2 Extra large .flex-xxl-baseline
3 Extra large .flex-3xl-baseline
4 Extra large .flex-4xl-baseline
5 Extra large .flex-5xl-baseline

Stretch

Item 1
Item 2
Item 3
<div class="p-3 flex-stretch" style="height: 150px">
  <div class="p-2 me-1 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 text-bg-primary">Item 3</div>
</div>

Class list

Breakpoint Class
Extra small .flex-stretch
Small .flex-sm-stretch
Medium .flex-md-stretch
Large .flex-lg-stretch
Extra large .flex-xl-stretch
2 Extra large .flex-xxl-stretch
3 Extra large .flex-3xl-stretch
4 Extra large .flex-4xl-stretch
5 Extra large .flex-5xl-stretch