Multiple dropdown menus in an input-group using bootstrap 3 - css

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 <span class="caret"></span>
</button>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
test 2 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</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>li-a-1</li>
<li>li-a-2</li>
<li>li-a-3</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>li-b-1</li>
<li>li-b-2</li>
<li>li-b-3</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>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</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>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</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 .

Answer 3

Well, for starters you havent set the data-toggle="dropdown" for button test 1
The link to the image you posted doesnt work, but you need to also set a div.input-group-btn to wrap those button and ul.
You should take a closer look at Bootsrap documentation.