Bootstrap 5 navbar align items right

bs5alpha picture bs5alpha · Sep 18, 2020 · Viewed 104.6k times · Source

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

Zim picture Zim · Dec 28, 2020

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.

Align nav items to right in Bootstrap 5