bootstrap dropdown bubble align right (not push-right)

HtmlCssTwitter Bootstrap

Html Problem Overview

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>

Html Solutions

Solution 1 - Html

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

Solution 2 - Html

This can be solved with the bootstrap class dropdown-menu-right with dropdown-menu that is specifically for this problem that uses the css properties right: 0; and left: auto; to right align it.

This solution is working for me.

Source - http://getbootstrap.com/components/#btn-dropdowns-dropup (go to developer tools for this)

Solution 3 - Html

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

This is still working in boostrap 4.2.1 :)

Solution 4 - Html

in bootstrap v 3.1.0 the answer to this question is different.

jsfiddle

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

Solution 5 - Html

ok got it!

position:relative;left:0 on <ul class="dropdown-menu">

Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Twitter Bootstrap Solutions

Previous Solution:

Fold / Collapse the except code section in sublime text 2

Sublimetext2Sublimetext3

Next Solution:

Does WebRTC use TCP or UDP?

TcpUdpWebrtcChannelTransport

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionno0neView Question on Stackoverflow
Solution 1 - HtmlmeetriView Answer on Stackoverflow
Solution 2 - HtmlJaspreet SinghView Answer on Stackoverflow
Solution 3 - HtmlGeorgi PeevView Answer on Stackoverflow
Solution 4 - HtmlCoding EnthusiastView Answer on Stackoverflow
Solution 5 - Htmlno0neView Answer on Stackoverflow