Question

I’ve got a form that should look like this:

Label:         <input field> Explanation of this field
Another Label: <input field> Lengthy explanation, must wrap.

I’m trying to do this in Twitter Bootstrap without using an actual <table>. A table would prevent the fields from wrapping when on a narrow screen, like a mobile device.

The standard Bootstrap syntax is this:

<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>

Is there any way to get these fields to go horizontal? The class “form-inline” doesn’t cut it because the labels don’t line up, and the class “form-horizontal” hasn’t worked because I can’t get the class=”help-block” to put the help text on the right.

Maybe there’s a trick I’m missing? Or a third-party bit of css to do better forms?

Answer 1

Here you go, try this (uses Bootstrap classes only) http://jsfiddle.net/jonschlinkert/pngWh/11/

(just remove the .warning, .info, .error, .success classes to remove the validation states. I left them there so that it would be easier to associate my example with the docs)

This is what it looks like: