Menu
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
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>
314
Use the w3-right class to float the dropdown to the right, and use CSS to position the dropdown content (right:0 will make the dropdown menu go from right to left).
To right-align a menu, use . dropdown-menu-right.
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add . dropdown-menu-right to a . dropdown-menu to right align the dropdown menu.
Dropdown button can be positioned in the center of the page by setting the “text-align” property of dropdown div to center. The following example contains a simple Bootstrap dropdown menu with an added class “my-menu”. The property “text-align: center” is added to the class.
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
151
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)
35
<div class="dropdown-menu dropdown-menu-right">
This is still working in boostrap 4.2.1 :)
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
