Bootstrap 5 navbar align items right
bootstrap-5, twitter-bootstrap
Solution
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?
Problem
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.