Justify inline form with Bootstrap
<p>I was wondering if there is any way to justify an inline form with bootstrap? I have a form with several rows of controls (form-groups) and want them all to end at the same place regardless of how many controls are in each row. Is there a way to do this?</p>

<p>The form:</p>

<pre><code>     &lt;div class="panel panel-body" data-bind="foreach: Contract"&gt;
        &lt;div class="form-inline panel"&gt;
            &lt;div class="input-group input-group-sm"&gt;
                &lt;span class="input-group-addon"&gt;First Name&lt;/span&gt;
                &lt;input type="text" class="form-control" placeholder="First Name" title="First Name" /&gt;
            &lt;/div&gt;
            &lt;div class="input-group input-group-sm"&gt;
                &lt;span class="input-group-addon"&gt;Last Name&lt;/span&gt;
                &lt;input type="text" class="form-control" placeholder="Last Name" title="Last Name" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="input-group input-group-sm panel"&gt;
            &lt;span class="input-group-addon"&gt;Address&lt;/span&gt;
            &lt;input type="text" class="form-control" placeholder="Address" title="Address" /&gt;
        &lt;/div&gt;
        &lt;div class="form-inline panel"&gt;
            &lt;div class="input-group input-group-sm"&gt;
                &lt;span class="input-group-addon"&gt;City&lt;/span&gt;
                &lt;input type="text" class="form-control" placeholder="City" title="City" /&gt;
            &lt;/div&gt;
            &lt;div class="input-group input-group-sm"&gt;
                &lt;span class="input-group-addon"&gt;State&lt;/span&gt;
                &lt;select placeholder="State" title="State" class="form-control"&gt;&lt;/select&gt;
            &lt;/div&gt;
            &lt;div class="input-group input-group-sm"&gt;
                &lt;span class="input-group-addon"&gt;Zip&lt;/span&gt;
                &lt;input type="text" class="form-control" placeholder="Zip Code" title="Zip Code" /&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="input-group input-group-sm panel"&gt;
            &lt;span class="input-group-addon"&gt;Total $&lt;/span&gt;
            &lt;input type="text" class="form-control" placeholder="Total" title="Total"&gt;
            &lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>Here is the fiddle:
<a href="https://jsfiddle.net/7abpdxpb/2/" rel="nofollow">https://jsfiddle.net/7abpdxpb/2/</a></p>

<p>Here is an updated fiddle with an ugly way to do it via % widths: <a href="https://jsfiddle.net/7abpdxpb/3/" rel="nofollow">https://jsfiddle.net/7abpdxpb/3/</a></p>

<p>I would really rather not do it this way because it stretches out the input's labels and also I'm not sure how this would react to re-sizing and all that... </p>