Form Layouts

Prev Next

The same .form-control and .form-group fields from the last lesson can be arranged three ways in Bootstrap 3: stacked (the plain default, one field per line), inline (all fields and the submit button on one line), or horizontal (labels to the left of their inputs, using the grid to align everything into columns).

1. Stacked Forms (the Default)

Do nothing extra and a form is stacked: every .form-group is full width and fields fall one below the other, label above input. This is what you saw in the previous lesson and it's the right choice for most content forms.

<form>
  <div class="form-group">
    <label for="trailName">Trail name</label>
    <input type="text" class="form-control" id="trailName">
  </div>
</form>

2. Inline Forms: .form-inline

Add .form-inline to the <form> to lay every .form-group out on a single line (from the small/tablet breakpoint up — it still stacks on very narrow phones). Because there's no visible label column, add a .sr-only label or a placeholder so the field's purpose is still clear.

<form class="form-inline">
  <div class="form-group">
    <label for="quickSearch" class="sr-only">Search trails</label>
    <input type="text" class="form-control" id="quickSearch" placeholder="Search trails">
  </div>
  <button type="submit" class="btn btn-default">Go</button>
</form>

3. Horizontal Forms: .form-horizontal + the Grid + .control-label

Add .form-horizontal to the <form>, then build each field as a grid row: the <label> gets .control-label plus a col-sm-* width, and the input is wrapped in its own col-sm-* div, both inside the .form-group (which itself behaves like .row once .form-horizontal is set).

<form class="form-horizontal">
  <div class="form-group">
    <label for="trailName" class="col-sm-2 control-label">Trail name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="trailName">
    </div>
  </div>
</form>

Naming note: .control-label was renamed .col-form-label in Bootstrap 4 (to match the new .col-form-label-sm/-lg sizing variants), with the same job of vertically aligning a grid-column label with its input.

4. Worked Example: TrailMap "Submit a Trail" Horizontal Form

The complete form: trail name, difficulty (a select), and description, each laid out as a two-column horizontal row with the submit button offset to line up under the inputs.

<form class="form-horizontal">
  <div class="form-group">
    <label for="trailName" class="col-sm-2 control-label">Trail name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="trailName" placeholder="e.g. Ridgeline Loop">
    </div>
  </div>
  <div class="form-group">
    <label for="difficulty" class="col-sm-2 control-label">Difficulty</label>
    <div class="col-sm-10">
      <select class="form-control" id="difficulty">
        <option>Easy</option>
        <option>Moderate</option>
        <option>Difficult</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="trailDescription" class="col-sm-2 control-label">Description</label>
    <div class="col-sm-10">
      <textarea class="form-control" id="trailDescription" rows="4"></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Submit trail</button>
    </div>
  </div>
</form>

Next up: that form has no validation feedback yet — head to Form Control States to add required-field errors, disabled/readonly fields, and feedback icons.

Prev Next