Bootstrap Navbar Dropdown Menu Items Right

Solution 1:

Bootstrap 5 (update 2021)

Use the dropdown-menu-end class on the dropdown-menu to align the items inside the menu right..

<div class="dropdown-menu dropdown-menu-end">
    <a class="dropdown-item" href="#">Link</a>
    <a class="dropdown-item" href="#">Link</a>
    <a class="dropdown-item" href="#">Link</a>
</div>

https://codeply.com/p/kWLLKdjdpC

Bootstrap 4 (original answer)

Use the dropdown-menu-right class to align the items inside the menu right..

<div class="dropdown-menu dropdown-menu-right text-right">
    <a class="dropdown-item" href="#">Link</a>
    <a class="dropdown-item" href="#">Link</a>
    <a class="dropdown-item" href="#">Link</a>
</div>

http://codeply.com/go/6Mf9aK0P8G

Solution 2:

Update for Bootstrap4-Beta:

Because there is a bug in bootstrap4 beta i had to add

.dropdown-menu-right { 
    right: 0; 
    left: auto; 
}

to make it work.

Solution 3:

.dropdown-menu-right class has a different behaviour if it's inside a .navbar. You can read the "Heads up" in the docs here:

https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment

Actually to solve I use this class:

.navbar .dropdown-menu-right { 
    right: 0; 
    left: auto; 
}