How to set up multiple adjacent forms using Bootstrap - html

Question

Suppose I have the following HTML using Bootstrap to style:
<form class="form-horizontal">
<div class='container'>
<div class="row">
<div class="col-sm-3">
<div class='form-group'>
<label>First Name</label>
<input></input>
</div>
<div class='form-group'>
<label>Last Name</label>
<input></input>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<input type="checkbox"></input>
</div>
<div class='form-group'>
<input></input>
<input></input>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<input type="checkbox"></input>
</div>
<div class='form-group'>
<input></input>
<input></input>
</div>
</div>
</div>
</div>
</form>
You can see the code here. What I am trying to do is set up a even 3 x 3 matrix with the input(checkbox included) with position (1,1) missing.
In addition to this I want the labels to sit to the left of the text inputs and remain there without shifting to the top of the first set of inputs.

Answer 1

You could do this by setting a minimum width on form-group and using that class consistently across the columns. Because the size needed to keep the label next to the input, you'd also need to adjust the column width; use md instead of sm.
.form-group {
min-width: 20em;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class='container'>
<div class="row">
<div class="col-md-3">
<div class='form-group'><br /></div>
<div class='form-group'>
<label>First Name</label>
<input />
</div>
<div class='form-group'>
<label>Last Name</label>
<input />
</div>
</div>
<div class="col-md-3">
<div class='form-group'>
<input type="checkbox" />
</div>
<div class='form-group'>
<input />
</div>
<div class='form-group'>
<input />
</div>
</div>
<div class="col-md-3">
<div class='form-group'>
<input type="checkbox" />
</div>
<div class='form-group'>
<input />
</div>
<div class='form-group'>
<input />
</div>
</div>
</div>
</div>
</form>