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 add margins, ordering, and wrapping with Bootstrap 5.
Auto Margins
We can add margins with the .mr-auto to add right margins and .ml-auto to add left margins.
For example, we can write:
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="mr-auto p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>
The first div aligns everything to the left.
The 2nd div has the first one with right margins so that the 2 that come after it are on the right side.
The 3rd div has the last child with the ml-auto class added so the last div is on the right and the rest are on the left.
With Align-Items
We can also align items vertically.
Bootstrap 5 comes with the mb-auto and mt-auto classes to do the alignment.
For instance, we can write:
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
<div class="mb-auto p-2 bd-highlight">item</div>
<div class="p-2 bd-highlight">item</div>
<div class="p-2 bd-highlight">item</div>
</div>
<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
<div class="p-2 bd-highlight">item</div>
<div class="p-2 bd-highlight">item</div>
<div class="mt-auto p-2 bd-highlight">item</div>
</div>
to do the alignment.
We use the mb-auto class to push the divs that come after it to the bottom.
And we use the mt-auto class to add space between the bottom div and the 2 above it.
Wrap
We can wrap items with various classes.
They include the flex-nowrap and flex-wrap classes.
.flex-nowrap disables wrapping, which is the browser default.
.flex-wrap enables wrapping.
We can wrap items in reverse with .flex-wrap-reverse .
For example, we can write:
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<div class="d-flex flex-wrap-reverse">
...
</div>
to add them.
The first div won’t wrap the children.
The 2nd div wraps the children.
The last wrap them in reverse.
These responsive variations are also available:
.flex-nowrap.flex-wrap.flex-wrap-reverse.flex-sm-nowrap.flex-sm-wrap.flex-sm-wrap-reverse.flex-md-nowrap.flex-md-wrap.flex-md-wrap-reverse.flex-lg-nowrap.flex-lg-wrap.flex-lg-wrap-reverse.flex-xl-nowrap.flex-xl-wrap.flex-xl-wrap-reverse.flex-xxl-nowrap.flex-xxl-wrap.flex-xxl-wrap-reverse
Order
The visual order of the items can be changed.
Bootstrap 5 comes with the order class to do that.
For example, we can write:
<div class="d-flex flex-nowrap bd-highlight">
<div class="order-3 p-2 bd-highlight">First</div>
<div class="order-2 p-2 bd-highlight">Second</div>
<div class="order-1 p-2 bd-highlight">Third</div>
</div>
to change the order.
We can also write:
.order-0.order-1.order-2.order-3.order-4.order-5.order-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xxl-0.order-xxl-1.order-xxl-2.order-xxl-3.order-xxl-4.order-xxl-5
These classes are also available for making items the first or last item:
.order-first.order-last.order-sm-first.order-sm-last.order-md-first.order-md-last.order-lg-first.order-lg-last.order-xl-first.order-xl-last.order-xxl-first.order-xxl-last
Conclusion
We can add margins and align-items with Bootstrap 5 classes.
There’re also classes for ordering elements.