Bootstrap 5 navbar align items right

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?

Leave a Comment