How does one create a read-only form layout in twitter bootstrap

Question

Suppose you have view information (not edit information) when using twitter bootstrap. What's the best way to display the data?

This was actually brought up as an issue: https://github.com/twitter/bootstrap/issues/4094.

Answer 1

Bootstrap 3

BS3 has a concept of a static field. You can mix and match static fields and input fields on the same form. Or use all static fields for a read only form.

http://getbootstrap.com/css/#forms-controls-static

Instead of a normal input element, you can use a p tag with this special bootstrap class:

<p class="form-control-static">[email protected]</p>

Bootstrap 4:

You can use the form-control-plaintext class on an input tag.

See https://getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text

Boostrap 5:

form-control-plaintext

Answer 2

I went along with MDO's answer on github.

Here's the example presented above that shows how to do this, using codepen. You can experiment with the styling. Pretty cool tool.

This also shows how to link to the bootstrap stylesheet in codepen.

http://cdpn.io/gFecv