Bootstrap 5 navbar align items right

Question

How do you align Bootstrap 5 navbar items to the right? In Bootstrap 3 it's navbar-right. In Bootstrap 4 it's ml-auto. But not work for Bootstrap 5.

Answer 1

Bootstrap 5 (update 2021)

As of Bootstrap 5 beta, left and right have been replaced by start and end for RTL support. Therefore the margin utilities changed for Bootstrap 5 beta:

• ml-auto => ms-auto (start)
• mr-auto => me-auto (end)

Also note, all uses of left and right have been replaced with start and end in Bootstrap 5...

• ml-* => ms-*
• pl-* => ps-*
• mr-* => me-*
• pr-* => pe-*
• text-left => text-start
• text-right=> text-end
• float-left => float-start
• float-right=> float-end
• border-left => border-start
• border-right=> border-end
• rounded-left => rounded-start
• rounded-right=> rounded-end
• dropleft => dropstart
• dropright=> dropend
• dropdown-menu-left => dropdown-menu-start
• dropdown-menu-right => dropdown-menu-end
• carousel-item-left => carousel-item-start
• carousel-item-right=> carousel-item-end

---

Bootstrap 5 alpha (original answer)

This question was asked for Bootstrap 5 alpha, and therefore ml-auto should still work.

How to align nav items to the right in Bootstrap 5?

Answer 2

I changed mr to ms and it worked for me, this is the best solution.

<ul class="navbar-nav ms-auto mb-2 mb-lg-0">

Answer 3

You need to use ms-auto instead of ml-auto in bootstrap 5.

Horizontal direction sensitive variables, utilities and mixins are renamed with more logical names — start and end in lieu of left and right in Bootstrap 5.

• Renamed .left-* and .right-* to .start-* and .end-*.
• Renamed .float-left and .float-right to .float-start and .float-end.
• Renamed .border-left and .border-right to .border-start and .border-end.
• Renamed .rounded-left and .rounded-right to .rounded-start and .rounded-end.
• Renamed .ml-* and .mr-* to .ms-* and .me-*.
• Renamed .pl-* and .pr-* to .ps-* and .pe-*.
• Renamed .text-left and .text-right to .text-start and .text-end.

You can see more bootstrap 5 migration details here: https://getbootstrap.com/docs/5.0/migration/#sass