Get twitter bootstrap btn-group to operate like grouped navigation bar with drop down menus

This solution works for me like a charm. No matter which order the different buttons are. But I have not testet this thing in other browsers than Chrome. One restriction is here: the caret has to be in the same button if it’s the last element in the group.

<style>
.btn-custom-toolbar > .btn-group {
margin-left: 0px;
margin-right: 0px;
}
.btn-custom-toolbar > .btn-group > .btn, .btn-custom-toolbar > .btn-group > .dropdown-toggle
{
 -webkit-border-radius: 0px;
 border-radius: 0px;
 -moz-border-radius: 0px;
 margin-left: -1px;
}
.btn-custom-toolbar > .btn-group:first-child > .btn:first-child {
 -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-custom-toolbar > .btn-group:last-child > .btn {
 -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; 
}
</style>
 <body style="padding: 30px;"
 <h1>Version with sub btns</h1>
 <div class="btn-toolbar btn-custom-toolbar">
 <div class="btn-group">
 <button class="btn btn-cust-first">Dropdown 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">Button 1</button>
 </div>
 <div class="btn-group">
 <button class="btn">Dropdown 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">Dropdown 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 class="btn-group">
 <button class="btn dropdown-toggle" data-toggle="dropdown">
 Dropdown 3
 <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>
 </body>

Leave a Reply