Bootstrap 3 Forms. Alignment when adding columns - css

Question

I am trying to play with adding columns to my bootstrap forms.
<section class="test-form">
<h3>Test Form</h3>
<div class="form-group form-group-sm">
<select name="" class="form-control">
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm">
<select class="form-control" name="" >
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm">
<input class="form-control" type="number" min="0"/>
</div>
<div class="form-group form-group-sm">
<button class="btn btn-block btn-primary">Test Button 1</button>
</div>
<div class="form-group form-group-sm col-xs-6">
<button class="btn btn-primary btn-block">Test Button 2</button>
</div>
<div class="form-group form-group-sm col-xs-6">
<button class="btn btn-primary btn-block">Test Button 3</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 4</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 5</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 6</button>
</div>
</section>
The problem with the above is that my desired output is as follows:
The left side of test button 2 and test button 4 should be inline with the left side of test button 1.
The right side of test button 3 and right side of test button 6 should be in-line with the right side of test button 1
Any advice on the correct way of achieving this?
Screenshot to explain below.

Answer 1

The spacing you are seeing is caused by the padding bootstrap adds to col-* classes. You can either override this padding for those elements or wrap all the elements of the form in a row and add a col-* class wrapping div to elements which don't have this class.
Here is an example of the latter.
HTML:
<section class="test-form">
<div class="row">
<div class="col-xs-12">
<h3>Test Form</h3>
<div class="form-group form-group-sm">
<select name="" class="form-control">
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm">
<select class="form-control" name="" >
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm">
<input class="form-control" type="number" min="0"/>
</div>
<div class="form-group form-group-sm">
<button class="btn btn-block btn-primary">Test Button 1</button>
</div>
</div>
<div class="form-group form-group-sm col-xs-6">
<button class="btn btn-primary btn-block">Test Button 2</button>
</div>
<div class="form-group form-group-sm col-xs-6">
<button class="btn btn-primary btn-block">Test Button 3</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 4</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 5</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 6</button>
</div>
</div>
</section>
Live example: http://www.bootply.com/1H1KXSAVqm

Answer 2

Bootply
The quickest fix I found was doing this:
<div class="form-group form-group-sm col-xs-12">
<select name="" class="form-control">
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm col-xs-12">
<select class="form-control" name="" >
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm col-xs-12">
<input class="form-control" type="number" min="0"/>
</div>
<div class="form-group form-group-sm col-xs-12">
<button class="btn btn-block btn-primary">Test Button 1</button>
</div>
Basically, where you didn't have the right padding, I added a col-xs-12 class to style them similar to the rest of your inputs.
Hope that helps!

Answer 3

This is how I achieved what it sounds like you are going for.
<div class='row'>
<div class='col-md-6 column'>
*Inputs*
</div>
</div>
<div class='row'>
<div class='col-md-6 column'>
*Inputs*
</div>
</div>