CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70406

Label adjustment when input fields are lined up using twitter's bootstrap

HTML:

<div class="controls controls-row">
       <label>Good</label>

       <input type="text" class="span3" name="one">
</div>

<div class="controls controls-row">
       <label>Still good</label>

       <input type="text" class="span3" name="two">

       <label>Bad</label>

       <input type="text" class="span3" name="three">
</div>

Output:

enter image description here

'Still good' and 'Bad' should be in one line. They are in one line when I remove the label tags. However I need the labels and I cannot find any example on how to use label correctly with controls-row.

I use the latest twitter bootstrap release.

Upvotes: 0

Views: 669

Answers (1)

Shail
Shail

Reputation: 3649

I have created the same effect in the following way : Jsfiddle Demo

<div class="controls controls-row">
    <label>Good</label>
    <input type="text" class="span3" name="one">
</div>
<div class="controls controls-row">
   <div class="row-fluid">
      <div class="span12">
        <div class="span6">
            <label>Still good</label>
            <input type="text" class="span12" name="two">
        </div>
        <div class="span6">
            <label>Bad</label>
            <input type="text" class="span12" name="three">
        </div>
    </div>
  </div>

Upvotes: 2

Related Questions