Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to use flexbox classes with Bootstrap 5.
Align Items
We can use the align-items classes to change the alignment of flex items.
The items will be aligned vertically with these classes.
The choices include start , end , center , baseline , or stretch .
For example, we can write:
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
align-items-start will put the items inside the div on the top.
align-items-end put the items at the bottom.
align-items-center center them vertically.
align-items-baseline put them at the top baseline.
align-items-stretch stretch the items from top to bottom.
Other choices of classes include:
.align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-stretch.align-items-sm-start.align-items-sm-end.align-items-sm-center.align-items-sm-baseline.align-items-sm-stretch.align-items-md-start.align-items-md-end.align-items-md-center.align-items-md-baseline.align-items-md-stretch.align-items-lg-start.align-items-lg-end.align-items-lg-center.align-items-lg-baseline.align-items-lg-stretch.align-items-xl-start.align-items-xl-end.align-items-xl-center.align-items-xl-baseline.align-items-xl-stretch.align-items-xxl-start.align-items-xxl-end.align-items-xxl-center.align-items-xxl-baseline.align-items-xxl-stretch
Align Self
The align-self utility classes let us individually change the alignment on the cross axis.
Choices include start , end , center , baseline or stretch .
stretch is the default choice.
start will align the item to the top.
end aligns thr item to the bottom.
center vertically aligns the item.
baseline aligns the item to the baseline which is the top.
stretch stretches the content from top to bottom.
We can use them in individual elements:
<div class="align-self-start">flex item</div>
<div class="align-self-end"> flex item</div>
<div class="align-self-center">flex item</div>
<div class="align-self-baseline">flex item</div>
<div class="align-self-stretch"> flex item</div>
Other choices include:
.align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-stretch.align-self-sm-start.align-self-sm-end.align-self-sm-center.align-self-sm-baseline.align-self-sm-stretch.align-self-md-start.align-self-md-end.align-self-md-center.align-self-md-baseline.align-self-md-stretch.align-self-lg-start.align-self-lg-end.align-self-lg-center.align-self-lg-baseline.align-self-lg-stretch.align-self-xl-start.align-self-xl-end.align-self-xl-center.align-self-xl-baseline.align-self-xl-stretch.align-self-xxl-start.align-self-xxl-end.align-self-xxl-center.align-self-xxl-baseline.align-self-xxl-stretch
Fill
The .flex-fill class can be used on sibling elements to force them to widths equal to their content while taking up all available horizontal space.
For example, we can write:
<div class="d-flex bd-light">
<div class="p-2 flex-fill bd-light">Lorem ipsum dolor sit amet</div>
<div class="p-2 flex-fill bd-light">Lorem ipsum</div>
<div class="p-2 flex-fill bd-light">Lorem ipsum</div>
</div>
We make the divs fill the space of the containers.
Other choices include:
.flex-fill.flex-sm-fill.flex-md-fill.flex-lg-fill.flex-xl-fill.flex-xxl-fill
Grow and Shrink
Bootstrap 5 has flexbox classes for growing and shrinking items.
There’s the .flex-grow-* utility classes to do that.
We can use it to make an element fill all available space.
For example, we can write:
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">lorem ipsum</div>
<div class="p-2 bd-highlight">lorem ipsum</div>
<div class="p-2 bd-highlight">lorem ipsum</div>
</div>
Now the 1st div fills all the available space because we have the flex-grow-1 class applied to it.
Conclusion
We can use Bootstrap 5 classes to add flexbox properties to our elements so that we don’t have to write them from scratch ourselves.
