Aligning ends of toolbar with ends of table in Bootstrap3 - html

Question

Using Bootstrap3, I have a "toolbar" above a table. The toolbar has a series of input fields and buttons. I need the left/right ends of the toolbar to align with the ends of the table.
I tried to use Bootstrap's column classes to position the various toolbar elements. The positioning seems to be correct when viewed in full screen mode on a typical large (or greater) display.
I am able to align the fields and buttons to the end of the table if I remove the left and right padding from the first and last divs respectively. This is what I'm currently doing and it works. But I was hoping to achieve this without overriding the default styles. I suspect there is a simpler way of doing this that I am missing.
This is a little different than I'm used to since there are several different types of elements in the toolbar.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="btn-toolbar">
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">Start Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">End Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">
Get Data
</button>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div>
<label class="control-label">Search</label>
<input type="search" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-1">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">
Search
</button>
</div>
</div>
<div class="col-sm-3">
<div class="pull-right">
<label class="control-label"> </label>
<div class="btn-toolbar">
<button type="button" class="btn btn-success">Create
</button>
<button type="button" class="btn btn-danger">
Close
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Any suggestions would be appreciated.

Answer 1

Two elements are extra in your code. One of them is the .btn-toolbar (the one in between .row and Bootstrap grid columns) while the second is .row around the table element.
Wrapping .row around the table is excess because you are not using any columns inside this row. Further remove .btn-toolbar element as well because you have set some custom margin-left here which is causing some misalignment from the left side.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">Start Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">End Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Get Data</button>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div>
<label class="control-label">Search</label>
<input type="search" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-1">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Search</button>
</div>
</div>
<div class="col-sm-3">
<div class="pull-right">
<label class="control-label"> </label>
<div class="btn-toolbar">
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-danger">Close</button>
</div>
</div>
</div>
</div>
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>