title: Multiple dropdown menus in an input-group using bootstrap 3
body: <p>I am trying make a search bar which should look some thing like this:</p>
  
  <p><a href="http://s22.postimg.org/ecaxmtj8x/search_bar.png" rel="noreferrer">http://s22.postimg.org/ecaxmtj8x/search_bar.png</a></p>
  
  <p>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. </p>
  
  <p>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?</p>
  
  <pre><code>&lt;div class="input-group input-group-lg"&gt;
      &lt;input type="text" class="form-control"&gt;
      &lt;div class="input-group-btn"&gt;
          &lt;button class="btn btn-primary" type="button"&gt;
              &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;button class="btn btn-primary" type="button"&gt;
              test 1&amp;nbsp;&amp;nbsp;&lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"&gt;
              test 2&amp;nbsp;&amp;nbsp;&lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;ul class="dropdown-menu" role="menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Option 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Option 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>