CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Jeremy
Jeremy

Reputation: 3951

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

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: enter image description here

Note: the grouped button "bar" should not have rounded cornes when a button is next to another button. (right side).

Upvotes: 5

Views: 12053

Answers (4)

Alex Craft
Alex Craft

Reputation: 15416

Add this CSS to fix it:

.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group > .dropdown-toggle {
  .border-radius(0);
}
.btn-group > .btn-group > .dropdown-toggle:first-child {
     -webkit-border-top-left-radius: 4px;
         -moz-border-radius-topleft: 4px;
             border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
      -moz-border-radius-bottomleft: 4px;
          border-bottom-left-radius: 4px;  
}
.btn-group > .btn-group > .dropdown-toggle:last-child {
     -webkit-border-top-right-radius: 4px;
         -moz-border-radius-topright: 4px;
             border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
      -moz-border-radius-bottomright: 4px;
          border-bottom-right-radius: 4px;
}

How it looks

enter image description here

Upvotes: 2

Amorphous
Amorphous

Reputation: 772

Just use:

  <div class="btn-group">
      <button class="btn" onclick="window.location.href='http://whatever.location';">
       ...
       ...
  </div>

Upvotes: 2

baptme
baptme

Reputation: 10092

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/

Upvotes: 4

jon hanson
jon hanson

Reputation: 9408

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.

Upvotes: 2

Related Questions