Defines the alignment on the cross axis.
| Class | Properties |
|---|---|
| align-items-stretch | align-items: stretch; |
| align-items-start | align-items: flex-start; |
| align-items-center | align-items: center; |
| align-items-end | align-items: flex-end; |
| align-items-baseline | align-items: baseline; |
Items are stretched to fit the container.
<div class="flex align-items-stretch flex-wrap" style="min-height: 200px">
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
</div>
Items are located at the start of the container.
<div class="flex align-items-start flex-wrap" style="min-height: 200px">
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 150px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 100px">3</div>
</div>
Items are located at the center of the container.
<div class="flex align-items-center flex-wrap" style="min-height: 200px">
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 150px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 100px">3</div>
</div>
Items are located at the end of the container.
<div class="flex align-items-end flex-wrap" style="min-height: 200px">
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 150px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 100px">3</div>
</div>
Items are located at the baseline of the container.
<div class="flex align-items-baseline flex-wrap" style="min-height: 200px">
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 150px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 100px">3</div>
</div>
Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:align-items-center to use a responsive class.
| Class | Description |
|---|---|
| sm: | small screens e.g. phones |
| md: | medium screens e.g. tablets |
| lg: | large screens e.g. notebooks |
| xl: | larger screens e.g monitors |
<div class="flex md:align-items-center align-items-stretch flex-wrap" style="min-height: 200px">
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
</div>