Show a text content as left aligned in Bootstrap 5 Modal footer

Question

I have a Bootstrap Modal. In the footer, a text content that should be aligned in left and a close button that should be aligned in right.

But by default, both are aligned in right.

<div class="modal-footer">
  <h6 class="modal-title" id="modalLblBtm" style="color: rgb(0, 0, 255);">Booking No#</h6>
  <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>                     
</div>

What class could be added to align both items vertically?

Appreciate if anybody could help on this!

Answer 1

I'm having the same issue. I've used mr-auto in Bootstrap-5. Now, I got the answer. It should be ms-auto. Thanks

Answer 2

I've found the solution by search around in Bootstrap site!

As mentioned by @Divyesh_08, we could add mr-auto class. But, it will work until Bootstrap-4. In Bootstrap-5, the class name has been changed as ms-auto.

start: left, end: right, center: center

So, I've updated my code. It should be as below to align vertically.

<div class="modal-footer">
      <h6 class="modal-title" id="modalLblBtm" style="color: rgb(0, 0, 255);">Booking No#</h6>
     <button type="button" class="btn btn-secondary" data-dismiss="modal  ms-auto">Close</button>
</div>

Answer 3

Use me-auto on the left button.

<div class="modal-footer">
     <button type="button" class="btn btn-primary me-auto">Save changes</button>
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>

For more info check: Post