How to line up labels and read-only fields in a Bootstrap 2 form
Asked Answered
S

3

49

In bootstrap 2, what's the recommended way of lining up labels and read-only text fields in a form. The following code sample creates misaligned fields:

<form class="form-horizontal">
    <fieldset>
        <legend>Sample</legend>    
        <div class="control-group">
            <label class="control-label">Readonly Field</label>
            <div class="controls">
                Lorem Ipsum and then some
            </div>
        </div>
    </fieldset>
</form>

Note that I can fix this up myself with custom CSS. That's not the issue. It just seems silly that this is not build-in so I feel like I must be overlooking something.

Stooge answered 27/3, 2012 at 10:8 Comment(0)
J
87

You can use the uneditable input

<span class="input-xlarge uneditable-input">Lorem Ipsum and then some</span>

EDIT:

As of bootstrap 3.0 a class has been added to handle this

When you need to place regular, static text next to a form label within a horizontal form, use the .form-control-static class on a <p>

<div class="controls">
  <p class="form-control-static">Lorem Ipsum and then some</p>
</div>
Jemima answered 27/3, 2012 at 17:51 Comment(5)
Just realised my question was wrong which you answered perfectly, so I'll mark it as the right answer. However any idea what to do if I just want text on the right side?Stooge
Right side of the label. There are some cases where having a read-only text box doesn't fit. Like my original example.Stooge
Sure, but what if I don't want an input-like looking field but rather just the pure text aligned with the label??Antler
Go back to plain old CSS? Unfortunately Bootstrap doesn't solve everything. IMO Twitter itself is not king of forms, they use few of them really.Valorous
check this and this post, hope helps someone.Trustless
D
3

There is a hack. You can use <label> with class "checkbox"

In your case:

<div class="controls">
 <label class="checkbox">
     Lorem Ipsum and then some
 </label>
</div>
Dyewood answered 5/7, 2013 at 10:12 Comment(1)
"checkbox" gets the vertical alignment correct (we're looking for something with padding-top:5px, yes?) but isn't working on my page because it's adding an unwanted 20px padding-left too. Think I'll probably go with a custom class.Conwell
M
0

As of bootstrap 4.0 the .form-control-static class has been replaced by the .form-control-plaintext class.

Multiplier answered 29/10, 2019 at 16:44 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.