Bootstrap Navbar Dropdown Menu Items Right

bootstrap-4 drop-down-menu bootstrap-5
eylay picture eylay · May 9, 2017 · Viewed 39.1k times · Source

As you see in the picture below, when I click on the bell icon, a dropdown menu appears at the bottom-right of the icon. I want this dropdown menu to appear at bottom-left instead of bottom-right. What should I do?

enter image description here

<nav class="navbar">
  <div class="container">
    <div class="navbar-nav d-flex flex-row">
      ...
    </div>
  </div>
</nav>

Answer

Zim picture Zim · May 9, 2017

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

Related questions

Bootstrap dropdown with Angular 6

I'm trying to create a dropdown item in a Bootstrap navbar using Angular 6. My code is working when I test it online : <nav class="navbar bg-light navbar-light navbar-expand"> <ul class="navbar-nav"> <li class="nav-item dropdown" &…

Read More
Force Bootstrap dropdown menu to always display at the bottom and allow it go offscreen

When there is no room at the bottom of the viewport to fit dropdown menu, it is displayed at the top of its dropdown button. Is it possible alter this behavior and make dropdown always appear at the bottom? <…

Read More
Change navbar color in Twitter Bootstrap

How would I go about modifying the CSS to change the color of the navbar in Twitter Bootstrap?

Read More