How to align three items in same row with Bootstrap 3? - html

Question

I'm trying to align three items in the same row but am having problems doing this in Bootstrap 3. Here is how they look now:
But I want them to be aligned in the same row (horizontally) and not be aligned vertically.
I have a fiddle here: http://jsfiddle.net/DTcHh/2132/
The relevant code is:
<div class="pull-right">
<form action="#" method="post" class="form-horizontal">
<div class="control-label">
<div class="control">

Answer 1

Pull right on a form will only work if the form has a specific width. In most cases you don't want to use that, but use the grid system.
You should use .input-group to add buttons to an input and show them on the same line.
You're not using labels, so there is no use for .form-horizontal.
See the fiddle
<div class="row">
<div class="col-sm-3 col-md-3">
<ul class="nav nav-pills">
<li class="active">Pill1
</li>
<li class=""><span id="pendingcount">Pill2</span>
</li>
</ul>
</div>
<div class="col-sm-6 col-sm-push-3">
<form action="#" method="post">
<input type="hidden" value="Date" name="filtertype" class="dropdown-field">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Date <span class="caret"></span></button>
<ul class="dropdown-menu">
<li> Date</li>
<li> Requestor</li>
<li> Classification</li>
<li> Destination</li>
<li> Description</li>
<li> File Name</li>
<li> Extracted Text</li>
<li> Extracted Keywords</li>
<li> Status</li>
<li> Scan Code</li>
</ul>
</span>
<input type="text" name="filterterm" value="" class="form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-default "> <i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</form>
</div>
</div>