47

I have a form with a mixture of editable and read-only fields which I want to style using Bootstrap. The editable fields are aligned correctly, but the read-only fields are not, as shown in this screenshot:

readonly field

The HTML I'm using is:

<form class="form-horizontal">
<div class="control-group">
  <label class="control-label">Name</label>
  <div class="controls">
    John Smith
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="date_of_birth">Date of Birth</label>
  <div class="controls">
    <input name="date_of_birth" id="date_of_birth" size="16" type="text" value="" />
    <span class="help-inline">dd/mm/yyyy</span>
  </div>
</div>
</form>

I don't want to show a read-only input for the fields which can't be edited, as users get confused/frustrated when they can't click in the box, and these are fields which can never be edited so it doesn't really make sense to show them as disabled/read-only. I just want the text to be displayed and aligned correctly with the label. Is there a way I can do this, either by using something in Bootstrap or overriding the default styles?

My question is similar to this one, which wasn't answered (at least not an answer to the original question), and as Bootstrap has had multiple releases in the past 7 months I thought it would be worth asking again in case anything had changed.

pwaring
  • 3,032
  • 8
  • 30
  • 46
  • possible duplicate of [How to line up labels and read-only fields in a Bootstrap form](http://stackoverflow.com/questions/9887430/how-to-line-up-labels-and-read-only-fields-in-a-bootstrap-form) – Iman Mahmoudinasab Nov 25 '14 at 17:21
  • 1
    I do mention that question explicitly in my question: "My question is similar to this one, which wasn't answered", so the two questions are already linked. – pwaring Nov 26 '14 at 07:23

7 Answers7

114

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>
chris vdp
  • 2,842
  • 2
  • 22
  • 35
  • Thanks, that's useful to know. I haven't switched to 3.0 yet but I will probably use it for future projects. – pwaring Aug 15 '13 at 14:05
  • 4
    I use `@Html.DisplayFor` and found I could put `form-control-static` in the surrounding div instead a `

    ` element.

     –  Jun 26 '15 at 15:00
  • 1
    @pwaring please consider selecting this as the chosen answer – Ben West Dec 15 '15 at 15:27
  • 1
    @BenWest My question was originally about Bootstrap 2.0, so the accepted answer is the correct one (also I haven't tested this answer so I have no idea whether it works). – pwaring Dec 16 '15 at 09:25
  • 2
    Show full examples please – Eduardo in Norway Oct 07 '16 at 13:49
  • @EduardoinNorway full examples of what? – chris vdp Oct 07 '16 at 17:49
  • @chrisvdp I guess Eduardo is looking for a full example of a label next to static text. I was assuming your answer would contain the same, although it's not too challenging to figure it out :-) – Duncan Jones Sep 07 '19 at 06:49
22

Create your own style and apply it as below -

.controls.readonly
{
  padding-top: 5px;
}

<div class="control-group">
  <label class="control-label">Name</label>
  <div class="controls readonly">
    John Smith
  </div>
</div>

Bootstrap doesn't cover every eventuality and you will need to make your own styles.

Simon Cunningham
  • 5,540
  • 1
  • 17
  • 7
  • 4
    Thanks - I appreciate that Bootstrap doesn't cover everything but it does seem a bit odd that it supports practically everything for forms except this one particular case. I had to add more styles than just the padding-top (line-height and font-size) but it seems to be working now. – pwaring Nov 09 '12 at 16:45
2

If you're using Bootstrap 3, definitely use the form-control-static class. If that's not an option, you could use the control-label class and have another class that removes the bold font weight.

in your html:

<div class="control-group">
  <label class="control-label">Name</label>
  <label class="control-label static-text">
    John Smith
  </label>
</div>

in your css:

.static-text {
    font-weight: normal;
}

Just make sure you list the static-text class after control-label on the class attribute in your html. That is so that it will override the font-weight established by control-label.

In your case you might also want to adjust the font size.

Of course, if bootstrap ever changes the CSS properties on the control-label class, you might have to go back and adjust your static-text class.

d512
  • 32,267
  • 28
  • 81
  • 107
1

Like @pwaring said, for me more styling was needed as well:

.controls.readonly{
 font-size: 14px;
 line-height: 20px;
 padding-top: 5px;
}

<div class="controls readonly">
    Lorem Ipsum and then some
  </div>
Nino van Hooff
  • 3,677
  • 1
  • 36
  • 52
1

To add to Simon's post, I added display: inline-block; to the CSS.

This is to match the display of the label and the text.

Sincere
  • 477
  • 5
  • 18
0

This is using chris vdp's answer and providing full HTML for people that did not find chris's answer blindingly obvious (like me and Eduardo in Norway).

I am potentially showing more code than needed, but I found that the above solutions were not at the 'copy-paste level' which I need most of the time. :-) I wanted to provide you with something I know works and can by pasted into your code in a blindingly obvious fashion. Just plunk this structure anywhere in the of your HTML.

Note: This works with and requires Bootstrap 3.

<form class="form-horizontal" role="form">
    <div class="control-group">
        <label for="personName" class="control-label col-sm-2">Name</label>
        <div class="controls col-sm-10">
            <p id="personName" class="form-control-static">John Smith</p>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label col-sm-2" for="date_of_birth">Date of Birth</label>
        <div class="controls">
            <input class="col-sm-3" name="date_of_birth" id="date_of_birth" size="16" type="text" value="" />
            <span class="help-inline col-sm-3">dd/mm/yyyy</span>
        </div>
    </div>
</form>
IvanD
  • 7,971
  • 4
  • 35
  • 33
-1

You can extend the controls class:

<style>
.controls.aligncorrect{
  padding-top: 5px;
}
</style>

and then using it like this:

<div class="controls aligncorrect" style="padding-top:5px;">
    John Smith
  </div>
000
  • 3,976
  • 4
  • 25
  • 39