title: Twitter Bootstrap - aligning label with text input (suggested practice)
body: <p>I made a <a href="http://jsfiddle.net/QagSy/5/" rel="nofollow">fiddle</a> and this is basically what I am using for log in window of the application I am working on.</p>
  
  <p>When the window screen size is reduced before controls stack on top of each other,
  label gets overlapped by the input control. I can simply add more span to the label to
  get around this but more span with the label will make too much gap between the input.</p>
  
  <p>My solution (not done in the <a href="http://jsfiddle.net/QagSy/5/" rel="nofollow">fiddle</a>) was to assign fixed pixel to the label and the parent wrapper to stop overlapping as well as have more control on the gutter (gap) but I suppose this is not the best practice and the code becomes messy. Any suggestions on elegant way of doing what I am trying to accomplish?</p>
  
  <p>I am documenting a template UI using Bootstrap and my aim is to get the most out of Bootstrap and do less of my ad-hoc solutions. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row-fluid"&gt;
      &lt;div class="span6 offset3"&gt;
          &lt;div class="login_frame"&gt;
              &lt;div style="text-align: center;"&gt;
                   &lt;h2&gt;Title&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;div class="span2"&gt;
                      &lt;label&gt;Username&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="span9"&gt;
                      &lt;input type="text" class="input-block-level"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;button class="span3 offset8"&gt;Log in&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>