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

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