Align content

Controls how multi-line flex items are distributed across the cross-axis.

Between

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
<div class="p-3 flex-align-between" style="height: 250px">
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 3</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 4</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 5</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 6</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 7</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 8</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 9</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 10</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 11</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 12</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 13</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 14</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 15</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 16</div>
</div>

Class list

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

Around

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
<div class="p-3 flex-align-around" style="height: 250px">
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 3</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 4</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 5</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 6</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 7</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 8</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 9</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 10</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 11</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 12</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 13</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 14</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 15</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 16</div>
</div>

Class list

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

Start

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
<div class="p-3 flex-align-start" style="height: 250px">
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 3</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 4</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 5</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 6</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 7</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 8</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 9</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 10</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 11</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 12</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 13</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 14</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 15</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 16</div>
</div>

Class list

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

End

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
<div class="p-3 flex-align-end" style="height: 250px">
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 3</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 4</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 5</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 6</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 7</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 8</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 9</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 10</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 11</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 12</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 13</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 14</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 15</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 16</div>
</div>

Class list

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

Center

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
<div class="p-3 flex-align-center" style="height: 250px">
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 3</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 4</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 5</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 6</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 7</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 8</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 9</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 10</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 11</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 12</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 13</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 14</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 15</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 16</div>
</div>

Class list

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

Stretch

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
<div class="p-3 flex-align-stretch" style="height: 250px">
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 1</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 2</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 3</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 4</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 5</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 6</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 7</div>
  <div class="p-2 me-1 mb-2 text-bg-primary">Item 8</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 9</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 10</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 11</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 12</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 13</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 14</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 15</div>
  <div class="p-2 me-1 mb-2 text-bg-primary d-md-block d-none">Item 16</div>
</div>

Class list

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