Categories
css html twitter-bootstrap twitter-bootstrap-3

Trouble with inline inputs in Bootstrap 3

I’m having trouble finding a reliable way to make two inputs appear inline in this example:

<div class="row">
<div class="col-md-8">
<h3>Things</h3>
</div>
<div class="col-md-4">
<form class="form-inline" role="form">
<div class="input-group">
<input type="search" class="form-control" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</form>
<a class="btn btn-primary pull-right" href="#/things/new">Add Thing</a>
</div>
</div>

inputs here should be adjacent, right-aligned, and vertically-aligned with the H3 on the left.

When I set the class of the divs around the inputs to be form-group (as it should be), the search input stops looking right.

I can sort of fix it by putting the inputs in different grid columns, but then they don’t align together properly. I want them to be next to each other and right-aligned, and I want them to be vertically-aligned with the h3 tag on the left.

SAMPLE: http://jsbin.com/IRUciJe/1/

WITH RESPONSIVE TABLE: http://jsbin.com/IRUciJe/2/edit

input group form inline example}

<div class="row" role="search-row">
<div class="col-xs-12 col-sm-5 col-md-5">
<h3>Things</h3>
</div>
<div class="col-xs-12 col-sm-7 col-md-7">
<form class="form-inline float-right" role="form">
<div class="form-group">
<!-- <input type="search" class="form-control" placeholder="Search + Enter" />-->
<div class="input-group">
<input type="search" class="form-control" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
<!--/.form-group-->
<a class="btn btn-primary" href="#">Add Thing</a>
</form>
</div>
<!--/.col-md-8-->
</div>
<!--/.row role=search-row-->

CSS

body { padding-top: 80px; }
hr.empty {margin:0 0 3% 0;border:0;}
div[role=search-row] h3 {margin:0 0 2%}
@media (min-width: 768px) {
div[role=search-row] .float-right {float:right}
}