I have been trying to get Twitter Bootstrap btn-group
with dropdown to work for multiple buttons that have a drop down menu.
Example:
<div class="btn-group">
<a href="#" class="btn">1</a>
<a href="#" class="btn">2</a>
<a href="#" class="btn">3</a>
<a href="#" class="btn">4</a>
<a href="#" class="btn">5</a>
</div>
And also my attempt: http://jsfiddle.net/x2BGB/
This displays a button group. I would like some of the buttons in that group to have drop down menus.
An example of what I am trying to achieve is:
Note: the grouped button "bar" should not have rounded cornes when a button is next to another button. (right side).
“Button Groups” in Bootstrap is a class of name “btn-group” which is used to create series of buttons in groups (without spaces) vertically or horizontally. This is the basic syntax of the button group class where each button has its own class of “btn”.
Add a Bootstrap class to group the buttons together.
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group , including each one when nesting multiple groups.
I've created a class btn-toolbar2 to avoid conflict and overide btn-toolbar default behavior.
Dropdowns must be in their own btn-group.
<div class="btn-toolbar btn-toolbar2">
<div class="btn-group">
<button class="btn">Dashboard</button>
</div>
<div class="btn-group">
<button class="btn">Button 1</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li><li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn">Item 3</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
with the css
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.btn-toolbar2 >.btn-group + .btn-group {
margin-left: -5px;
}
.btn-toolbar2 > .btn-group > .btn, .btn-toolbar2 > .btn-group > .dropdown-toggle
{
-webkit-border-radius: 0px;
border-radius: 0px;
-moz-border-radius: 0px;
}
.btn-toolbar2 > .btn-group:first-child > .btn, .btn-toolbar2 > .btn-group:first-child > .dropdown-toggle{
-webkit-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
}
.btn-toolbar2 > .btn-group:last-child > .btn:last-child, .btn-toolbar2 > .btn-group:last-child > .dropdown-toggle:nth-last-child(2){
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-topright: 4px;
}
http://jsfiddle.net/baptme/x2BGB/4/
The Bootstrap documentation for button groups states this:
Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.
Obviously if you do this then each button sits separately, i.e. you lose the toolbar effect. So it seems that you can't have multiple dropdowns in the same toolbar - I guess this is a limitation of how Bootstrap implements the dropdowns.
You can have multiple dropdowns in a nav-bar, so you might be able to use that instead.
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