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

Question

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.

chris vdp · Accepted Answer · 2013-08-12T20:49:53.853

85

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>

edited Aug 12 '13 at 20:49

answered Mar 27 '12 at 17:51

chris vdp

2,802
2
20
35

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? – batkuip Mar 28 '12 at 23:32
Right side of the label. There are some cases where having a read-only text box doesn't fit. Like my original example. – batkuip Mar 29 '12 at 03:18
3

Sure, but what if I don't want an input-like looking field but rather just the pure text aligned with the label?? – Juri Oct 07 '12 at 15:57
1

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. – gertas Oct 17 '12 at 21:46
**check** [this](http://www.w3schools.com/bootstrap/bootstrap_forms_inputs2.asp) and [this](http://ux.stackexchange.com/a/53350/65932) post, hope helps someone. – Shaiju T Jan 27 '16 at 11:15

score 2 · Answer 2 · answered Jul 05 '13 at 10:12

2

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>

answered Jul 05 '13 at 10:12

XuDing

1,814
18
25

"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. – mwardm Nov 13 '14 at 11:37

score 0 · Answer 3 · answered Oct 29 '19 at 16:44

0

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

answered Oct 29 '19 at 16:44

Eagle_

337
1
3
12

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

3 Answers3

Linked