Align Items

Defines the alignment on the cross axis.

ClassProperties
align-items-stretchalign-items: stretch;
align-items-startalign-items: flex-start;
align-items-centeralign-items: center;
align-items-endalign-items: flex-end;
align-items-baselinealign-items: baseline;

Items are stretched to fit the container.

1
2
3
<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.

1
2
3
<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.

1
2
3
<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.

1
2
3
<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.

1
2
3
<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.

ClassDescription
sm:small screens e.g. phones
md:medium screens e.g. tablets
lg:large screens e.g. notebooks
xl:larger screens e.g monitors
1
2
<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>