Databases
StackOverflow2013
Postsdbo
POTwitter Bootstrap - aligning label with text input (suggested practice)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTwitter Bootstrap - aligning label with text input (suggested practice)
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload