title: how to horizontally align label and select tags in bootstrap 3?
body: <p>The problem is that there is a big gap between the <code>labels</code> and <code>select tags</code></p>
  
  <pre><code>&lt;form class="form-horizontal"&gt;
  &lt;fieldset&gt;
    &lt;div class="row"&gt;
  
        &lt;div class="form-group"&gt;
            &lt;label class="col-sm-4 contro-label "&gt;What Skill will you be working on?&lt;/label&gt;
            &lt;div class="col-sm-3"&gt;
                &lt;select class="form-control input-sm"&gt;
                    &lt;option&gt;Select&lt;/option&gt;
                    &lt;option&gt;PHP&lt;/option&gt;
                    &lt;option&gt;JAVA&lt;/option&gt;
  
                &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
            &lt;label class="col-sm-4 contro-label"&gt;What Course?&lt;/label&gt;
            &lt;div class="col-sm-3"&gt;
                &lt;select class="form-control input-sm"&gt;
                    &lt;option&gt;Select&lt;/option&gt;
                    &lt;option&gt;CMP&lt;/option&gt;
  
                    &lt;option&gt;IT&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="form-group"&gt;
            &lt;label class="col-sm-4 contro-label"&gt;Section?&lt;/label&gt;
            &lt;div class="col-sm-3"&gt;
                &lt;select class="form-control input-sm"&gt;
                    &lt;option&gt;Select&lt;/option&gt;
  
                    &lt;option&gt;34432&lt;/option&gt;
                    &lt;option&gt;44333&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/fieldset&gt;  
  &lt;/form&gt;
  </code></pre>
  
  <p>I tried to add some <code>col-sm-x</code> inside my <code>row</code> but didn't work.  Here is an image on how it looks like:
  <a href="https://i.stack.imgur.com/k2Cb5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k2Cb5.png" alt="Form"></a></p>
  
  <p>I also tried to add the <code>pull-right</code> class inside my labels, but since <code>label</code> and <code>select tag</code> are inside the same <code>form-group</code> I think this is causing the all thing to move out of place </p>