bootstrap dropdown bubble align right (not push-right)

Issue

I have cart in my top menu, using push-right and my problem is that the dropdown bubble falls out of the page. I am trying to align the bubble right, so that it right-aligns with ‘click’

like this

enter image description here

HTML:

<div class="cart pull-right">
  <ul class="nav">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">CLICK</a>
       <div class="dropdown-menu">
       STUFF
       </div>
    </li>
  </ul>
</div>

Solution

Bootstrap 5+ (Update June 2022)

dropdown-menu-right has been replaced with dropdown-menu-end

<div class="dropdown-menu dropdown-menu-end">
    STUFF
</div>

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

Bootstrap 3.1+

Adding the class .dropdown-menu-right to the same div containing the class dropdown-menu:

<div class="dropdown-menu dropdown-menu-right">
    STUFF
</div>

http://getbootstrap.com/components/#dropdowns-alignment

Bootstrap 2.3 & 3.0

Add the class .pull-right to the same div containing the class dropdown-menu

<div class="dropdown-menu pull-right">
    STUFF
</div>

This seems to work for me using bootstrap 3.0

Answered By – meetri

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published