How to line up labels and read-only fields in a Bootstrap 2 form
49,424
Solution 1
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>
Solution 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>
Related videos on Youtube
Author by
batkuip
Updated on October 30, 2020Comments
-
batkuip over 3 years
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.
-
batkuip over 12 yearsJust 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 over 12 yearsRight side of the label. There are some cases where having a read-only text box doesn't fit. Like my original example.
-
abhijeet nigoskar over 11 yearsSure, but what if I don't want an input-like looking field but rather just the pure text aligned with the label??
-
gertas over 11 yearsGo 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.
-
mwardm over 9 years"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.
-
Shaiju T over 8 years