title: bootstrap-3 horizontal forms label not staying at the top input fields
body: <p>When using Bootstrap 3 with .form-horizontal, with the bootstrap classes below, I get forms with the label on top which is what I want. <a href="http://bootply.com/73486" rel="nofollow noreferrer">http://bootply.com/73486</a></p>
  
  <p>However, in Image 2, I try to reduce the width to my  desired size, using classes like .col-lg-*, which suddenly forces the labels to the side instead of remaining on top. I have tried different sizes to no avail..</p>
  
  <pre><code>  &lt;div class="form-group"&gt;
      &lt;label class="control-label"&gt; &lt;%= f.label :title %&gt;&lt;/label&gt;
  
       &lt;div class="form-control"&gt;
         &lt;%= f.text_field :title, :placeholder =&gt; "title" %&gt;
       &lt;/div&gt;
  
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>Image 1</strong></p>
  
  <p><img src="https://i.stack.imgur.com/OZUDk.png" alt="enter image description here"></p>
  
  <p><strong>Image 2</strong></p>
  
  <p>However, when I try to wrap inputs in grid columns so as to reduce the width to my  desired size, the labels move to the side of the form inputs instead of on top.</p>
  
  <pre><code> &lt;div class="form-group"&gt;
     &lt;label class="control-label col-lg-2"&gt; &lt;%= f.label :title %&gt;&lt;/label&gt;
     &lt;div class="col-lg-10"&gt;
       &lt;div class="form-control"&gt;
        &lt;%= f.text_field :title, :placeholder =&gt; "title" %&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Vq5je.png" alt="enter image description here"></p>