Bootstrap how to get help-block to work with inline and horizontal forms

Question

I would like to setup a form using the Bootstrap form-horizontal layout with the controls in an inline layout while still being able to have the help-block text below each field.

I have been able to accomplish the desired layout using the code below.

<form class="form-horizontal">
            <div class="control-group">
                <span class="control-label">Name</span>
                <div class="controls form-inline">
                    <input type="text" class="input-large" placeholder="First" id="FirstName">
                    <input type="text" class="input-mini" placeholder="M.I." id="FirstName">
                    <input type="text" class="input-large" placeholder="Last" id="LastName">
                </div>
            </div>
        </form>

However I would like to be able to add the help-block class to each field as shown below:

<input type="text" id="FirstName" class="input-large" >
<p class="help-block">First Name</p>

Example of what I am looking for:

Example Image

Any suggestions?

Answer 1

I don't believe there is a way to do with Bootstrap, but you can do it with an extra markup and a little of CSS.

Demo: http://bootply.com/64777

HTML:

<form>
    <div class="control-group">
        <label class="control-label">Name</label>
        <div class="my-special-form">
            <div>
                <input type="text" class="input-large" placeholder="First" id="FirstName">
                <p class="help-block">First Name</p>
            </div>
            <div>
                <input type="text" class="input-mini" placeholder="M.I." id="FirstName">
                <p class="help-block">M.I</p>
            </div>
            <div>
                <input type="text" class="input-large" placeholder="Last" id="LastName">
                <p class="help-block">Last</p>
            </div>
        </div>
    </div>
</form>

CSS:

.my-special-form div {
    float: left;
}

Answer 2

Since boostrap3 it's supported to use .row and .col-classes to control forms appearance.

This gives you better control on various screen sizes than a horizontal form does. Please have a look at http://getbootstrap.com/css/#forms-control-sizes

With the provided example from Boostrap3 you might solve it like this inside your form (without .form-inline).

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
    <p class="help-block">First Name</p>
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
    <p class="help-block">M.I</p>
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
    <p class="help-block">Last</p>
  </div>
</div>