Bootstrap 4 Navbar Dropdown Menu Items Right
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
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.
.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;
}