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.

#programming #web-development #javascript #technology #software-development