Multiple dropdown menus in an input-group using bootstrap 3

Question

I am trying make a search bar which should look some thing like this:

http://s22.postimg.org/ecaxmtj8x/search_bar.png

I am using bootstrap 3. In the code below I have 3 buttons, where the "menu 2" button opens a dropdown menu. I would like the "menu 1" button to open a menu too. But so far my attempts have failed.

When I try to group the buttons into a btn-group, it seperates from the joined search bar, which is not what I want. Is there a way to have 2 menu's inside a div using the input-group class?

<div class="input-group input-group-lg">
    <input type="text" class="form-control">
    <div class="input-group-btn">
        <button class="btn btn-primary" type="button">
            <span class="glyphicon glyphicon-search"></span>
        </button>
        <button class="btn btn-primary" type="button">
            test 1&nbsp;&nbsp;<span class="caret"></span>
        </button>
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
            test 2&nbsp;&nbsp;<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
</div>

Answer 1

I faced the same problem and found a pure bootstrap solution. Avoid any extra css "repairs" by wrapping all drop down buttons in a single input-group-btn div, then each drop down button wrap in a btn-group div. Using multiple input-group-btn divs in a single input-group div breaks the styling and requires css repairs as offered in another solution. The bootstrap doc hints at this. Here is a simple example to demonstrate:

<div class="input-group">
  <div class="input-group-btn">

    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span>btn-drop-a</span></button>
      <ul class="dropdown-menu">
        <li><a href="#">li-a-1</a></li>
        <li><a href="#">li-a-2</a></li>
        <li><a href="#">li-a-3</a></li>
      </ul>
    </div>

    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span>btn-drop-b</span></button>
      <ul class="dropdown-menu">
        <li><a href="#">li-b-1</a></li>
        <li><a href="#">li-b-2</a></li>
        <li><a href="#">li-b-3</a></li>
      </ul>
    </div>
  </div>

  <input class="form-control" type="text" placeholder="search">
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-search"></span>
    </span>
  </input>
</div>

Answer 2

It's quite easy to do that. Though I employed a small hack to make it look proper (It may be done without that hack too I think ... Not too sure )

jsFiddle Demo : http://jsfiddle.net/niranjan94/dgs25/

HTML:

<div class="col-lg-6 visible-xs">
    <br>
    <form action="" method="get" role="search">
        <div class="input-group input-group-lg">
            <input type="text" name="query" class="form-control" placeholder="Search Advertisements">
            <span class="input-group-btn">
                <button class="btn btn-primary custom" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                <button type="button" class="btn btn-primary dropdown-toggle custom" data-toggle="dropdown">Button 1 <span class="caret"></span></button>
                <ul class="dropdown-menu pull-right">
                    <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>
            </span>
            <span class="input-group-btn">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Button 2 <span class="caret"></span></button>
                <ul class="dropdown-menu pull-right">
                    <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>
            </span>
        </div>
    </form>
</div>

CSS (Overriding default border-radius to make it look proper):

.custom{
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
}

(There might be other better ways to do this too)

That's it ... :) Hope it solves your problem .