adding .pull-right
to ul.dropdown-menu
should do it
Deprecation Notice: As of Bootstrap v3.1.0,
.pull-right
on dropdown menus is deprecated. To right-align a menu, use.dropdown-menu-right
.
Since Bootstrap v3.1.0 adding .pull-right
is deprecated on dropdown menus. A .dropdown-menu-right
should be added to ul.dropdown-menu
instead. Docs
For Bootstrap 4, adding dropdown-menu-right
works. Here's a working example..
http://codeply.com/go/w2MJngNkDQ
a solution that does not need modifying the HTML only the CSS is
li.dropdown:last-child .dropdown-menu {
right: 0;
left: auto;
}
Its particularly usefull for dynamically generated menus where its not always possible to add the recommended class dropdown-menu-right
to the last element
.dropdown-pull-right
with following css:.dropdown-pull-right {
float: right !important;
right: 0;
left: auto;
}
.dropdown-pull-right>.dropdown-menu {
right: 0;
left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="dropdown dropdown-pull-right btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Open Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
in Bootstrap 4 you can use .dropleft
just change to :
<span class="dropleft">
or
add .dropdown-menu-{lg,med,sm,xs}-right to your dropdown-menu
<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdown03">
<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>
float-*-right
for Bootstrap 4
*
= xs, sm, md, lg
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