29

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>
0

7 Answers 7

71

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

2
  • 1
    Works to both position menu within viewport when off-screen and align text-right.
    – vhs
    Apr 25, 2018 at 11:26
  • Thanks for the info. Renaming classes in this way is not cool!
    – Sam
    Jun 24, 2022 at 2:49
18

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.

1
  • Thanks - I was hoping to avoid adding CSS, but this did the trick. Feb 9, 2018 at 19:40
9

.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; 
}
6

Bootstrap 5

@Zim 's answer is likely the most correct as suggested in the docs.

Despite that, the only way I managed to make it work was using the end-0 class instead.

<ul class="dropdown-menu end-0">
  <li><a class="dropdown-item" href="#">Save</a></li>
  <li><a class="dropdown-item" href="#">Fetch</a></li>
</ul>
1
  • Ok, I was getting mad already. THIS and ONLY THIS helped me! I'm using BS 5.1, which comes with the current asp.net core 6 template version for blazor (not that it matters) I read the official BS docu and many forums. The consensus is for BS 5 we should use dropdown-menu-end and for older verisons (BS 4) dropdown-menu-right - but BOTH did NOT WORK AT ALL for me. end-0 however does. WHY IS THAT? WHY does official docu lie !!! May 2, 2022 at 17:15
1

It's little change in boostrap 4. To align navbar to right side, you've to make only two changes. they are:

  1. in navbar-nav class add w-100 as navbar-nav w-100 to make width as 100
  2. in nav-item dropdown class add ml-auto as nav-item dropdown ml-auto to make margin left as auto.

If you didn't understand, please refer this

https://stackoverflow.com/a/58474527/10907720

1

I Chaned it by add dir="rtl"

<div class="dropdown-menu " dir="rtl" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item " href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
</div>
0

I encountered the same problem with an additional difficulty because my menu is created in PHP - the number of elements and dropdown content is not fixed.

Here is a solution that centers dropdowns when possible, otherwise align them on the left or right to prevent them from exceeding the viewport:

var $maxWidthElement = $('.navbar'),
    maxWidth = $maxWidthElement.width();

var positionDropdowns = function() {
    $('.dropdown-menu').each(function() {
        var $navItem = $(this).closest('.dropdown'),
            dropdownWidth = $(this).outerWidth(),
            dropdownOffsetLeft = $navItem.offset().left,
            dropdownOffsetRight = maxWidth - (dropdownOffsetLeft + dropdownWidth),
            linkCenterOffsetLeft = dropdownOffsetLeft + $navItem.outerWidth() / 2;

        if ((linkCenterOffsetLeft - dropdownWidth / 2 > 0) & (linkCenterOffsetLeft + dropdownWidth / 2 < maxWidth)) {
            // center the dropdown menu if possible
            $(this).css('left', -(dropdownWidth / 2 - $navItem.outerWidth() / 2));
        } else if ((dropdownOffsetRight < 0) & (dropdownWidth < dropdownOffsetLeft + $navItem.outerWidth())) {
            // set the dropdown menu to left if it exceeds the viewport on the right
            $(this).addClass('dropdown-menu-right');
        } else if (dropdownOffsetLeft + dropdownWidth > maxWidth) {
            // full width if the dropdown is too large to fit on the right
            $(this).css({
                left: 0,
                right: 0,
                width:
                    $(this)
                        .closest('.container')
                        .width() + 'px'
            });
        }
    });
};

var resizeTimer;

$(window).on('resize', function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        maxWidth = $maxWidthElement.width();
        positionDropdowns();
    }, 250);
});

positionDropdowns();
window.onresize = positionDropdowns;

https://codepen.io/migli/pen/RELPPj

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.