title: Bootstrap Input Group with Dropdown Menu
body: <p>I am using a Legacy Bootstrap version (2.3) to support a tool that is not planned for upgrade anytime soon.</p>
  
  <p>I am trying to make a simple Filter Style Dropdown &amp; Input Group but I am having some issues with the menus.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div id="main" class="container"&gt;
  &lt;div class="page-header"&gt;
       &lt;h3 class="text-info"&gt;
       Training Summary &lt;small&gt;Schedule Breakdown&lt;/small&gt; 
       &lt;span class="pull-right"&gt;
          &lt;div class="input-prepend input-append"&gt;
             &lt;button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle"&gt;
             Start Date&amp;nbsp;&amp;nbsp; &lt;span class="caret"&gt;&lt;/span&gt;
             &lt;/button&gt;
             &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                &lt;li class="divider"&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
             &lt;input class="span2 dp cen" type="text" placeholder="Select a Start Date" name="startDate"&gt;
             &lt;button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle"&gt;
             End Date&amp;nbsp;&amp;nbsp;&lt;span class="caret"&gt;&lt;/span&gt;
             &lt;/button&gt;
             &lt;ul class="dropdown-menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                &lt;li class="divider"&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
             &lt;input class="span2 dp cen" type="text" placeholder="Select an End Date" name="endDate"&gt;
             &lt;button class="btn" type="button" name="fetch"&gt;&lt;i class="icon-refresh"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/div&gt;
       &lt;/span&gt;
    &lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>What I am trying to do is get the dropdown menus to fire when you click on the "Start Date" or "End Date" dropdowns. Nothing appears to be happening and I'm not too sure why.</p>
  
  <p>I created a fiddle to show the issue: <a href="http://jsfiddle.net/3h6x6ztw/1/" rel="nofollow noreferrer">http://jsfiddle.net/3h6x6ztw/1/</a> </p>
  
  <p><a href="https://i.stack.imgur.com/YJTLy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YJTLy.png" alt="enter image description here"></a></p>
  
  <p>My goal is to get the dropdown menu to show up under the buttons as they normally would in a dropdown menu. Not sure if it's something I am missing or just a syntax issue.</p>