Bootstrap Input Group with Dropdown Menu - html

Question

I am using a Legacy Bootstrap version (2.3) to support a tool that is not planned for upgrade anytime soon.
I am trying to make a simple Filter Style Dropdown & Input Group but I am having some issues with the menus.
Here is my code:
<div id="main" class="container">
<div class="page-header">
<h3 class="text-info">
Training Summary <small>Schedule Breakdown</small>
<span class="pull-right">
<div class="input-prepend input-append">
<button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle">
Start Date <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<input class="span2 dp cen" type="text" placeholder="Select a Start Date" name="startDate">
<button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle">
End Date <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<input class="span2 dp cen" type="text" placeholder="Select an End Date" name="endDate">
<button class="btn" type="button" name="fetch"><i class="icon-refresh"></i></button>
</div>
</span>
</h3>
</div>
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.
I created a fiddle to show the issue: http://jsfiddle.net/3h6x6ztw/1/
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.

Answer 1

In Bootstrap plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js).
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Also you have to set a content for the button an the ul.dropdown-menu with position: relative because ul.dropdown-menu has position: absolute the default in bootstrap is btn-group
something like this:
<div class="btn-group">
<button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle">
Start Date <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</div>
Here a jsfiddle example to play with