Bootstrap 4 Forms

Create responsive and consistently styled forms using Bootstrap 4 form classes

Bootstrap 4 provides a default style that is applied across most form controls. It also provides classes for specific purposes.

Basic Form

Use Bootstrap's .form-control class against textual <input>, <textarea>, and <select> elements to apply width: 100% by default.

Wrap labels and controls inside a <fieldset> with the Bootstrap .form-group class applied for optimum spacing. Alternatively, you can use a <div> or other element.

<form action="/html/tags/html_form_tag_action.cfm">
<fieldset class="form-group">
<label for="first_name">First Name</label>
<input type="text" class="form-control" id="first_name" name="first_name">
</fieldset>
<fieldset class="form-group">
<label for="last_name">Last Name</label>
<input type="text" class="form-control" id="last_name" name="last_name">
</fieldset>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Inline Form

Use Bootstrap's .form-inline class to make the form elements render as inline-block and left-aligned. Use a spacer utility (eg, mr-sm-2) to add space between elements.

Note that this only applies when the viewport is at least 576 pixels wide. If the following form is not displaying inline, open the preview in a new window. If it still isn't displaying inline, you might need to view the example on a bigger screen.

<form action="/html/tags/html_form_tag_action.cfm" class="form-inline">
<label class="mr-sm-2 mb-0" for="first_name">First Name</label>
<input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name" name="first_name">
<label class="mr-sm-2 mb-0" for="last_name">Last Name</label>
<input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name" name="last_name">
<button type="submit" class="btn btn-primary mt-2 mt-sm-0">Submit</button>
</form>

Hidden Labels

Labels should always be provided on input fields, otherwise screenreaders will have trouble. You can hide the label if required, by using Bootstrap's .sr-only class.

Here, we use .sr-only to hide the labels. We also add a placeholder attribute to provide a hint to the user as to what to enter. Using the placeholder attribute in this manner is not recommended, as it can cause usability issues.

<form action="/html/tags/html_form_tag_action.cfm" class="form-inline">
<label class="mr-sm-2 mb-0 sr-only" for="first_name">First Name</label>
<input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name" name="first_name" placeholder="First name">
<label class="mr-sm-2 mb-0 sr-only" for="last_name">Last Name</label>
<input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name" name="last_name" placeholder="Last name">
<button type="submit" class="btn btn-primary mt-2 mt-sm-0">Submit</button>
</form>

Horizontal Form

You can use Bootstrap's grid classes to create horizontal forms. Just specify how many columns each element should span. Specifically, add a .row class to the .form-group and a .col-*-* or .col-* class for each column.

You should also add Bootstrap's .col-form-label class to the <label> element in order to vertically center the label in relation to textual input elements.

<div class="container">
<form action="/html/tags/html_form_tag_action.cfm">
<div class="form-group row">
<label for="first_name" class="col-xs-3 col-form-label mr-2">First Name</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="first_name" name="first_name">
</div>
</div>
<div class="form-group row">
<label for="last_name" class="col-xs-3 col-form-label mr-2">Last Name</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="last_name" name="last_name">
</div>
</div>
<div class="form-group row">
<div class="offset-xs-3 col-xs-9">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>

Bootstrap 4 vs Bootstrap 3

There are some minor differences between Bootstrap 4 and Bootstrap 3 when it comes to horizontal forms.

Grids

When using grids for form layout, Bootstrap 4 requires the .row class. This class is not a requirement on Bootstrap 3 forms (although it is still a requirement on Bootstrap 3 grids in general).

Control Labels

Bootstrap 4 uses .col-form-label * when using grids for form layout, whereas Bootstrap 3 forms use .control-label.

* Note that Bootstrap 4 initially used .form-control-label but subesquently changed this to .col-form-label.

The .form-horizontal Class

Bootstrap 4 doesn't require the .form-horizontal class. Bootstrap 3 does require it.

Form Row

You can replace .row with .form-row for a more compact layout.

<p><code>.row</code>:</p>
<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

<p class="mt-5"><code>.form-row</code>:</p>
<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Form Legends

When using <legend> elements within your forms, you have the option of adding Bootstrap's .col-form-label class. This class styles the legend to be more like a label.

This can be handy for when presenting a stack of radio buttons or checkboxes within a horizontal form.

<div class="container">
<form action="/html/tags/html_form_tag_action.cfm">

<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-3">Fruit</legend>
<div class="col-9">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="legendRadio" id="legendRadio1" value="1">
Apple
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="legendRadio" id="legendRadio2" value="2" checked>
Orange
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="legendRadio" id="legendRadio3" value="3">
Watermelon
</label>
</div>
</div>
</div>
</fieldset>

<div class="form-group row">
<label for="first_name" class="col-3 col-form-label">First Name</label>
<div class="col-9">
<input type="text" class="form-control" id="first_name" name="first_name">
</div>
</div>
<div class="form-group row">
<label for="last_name" class="col-3 col-form-label">Last Name</label>
<div class="col-9">
<input type="text" class="form-control" id="last_name" name="last_name">
</div>
</div>

<div class="form-group row">
<div class="offset-3 col-9">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>

</form>
</div>

Form Control Size

You can use Bootstrap 4's .form-control-lg and .form-control-sm to increase or decrease the size of an input control.

<div class="form-group">
	<input type="text" class="form-control form-control-sm" placeholder="Small">
</div>
<div class="form-group">
	<input type="text" class="form-control" id="last_name" placeholder="Default size">
</div>
<div class="form-group">
	<input type="text" class="form-control form-control-lg" placeholder="Large">
</div>

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 uses a different class to Bootstrap 3 when it comes to form control size.

Bootstrap 4: Bootstrap 4 forms use .form-control-lg and .form-control-sm to increase or decrease the size of an input control.
Bootstrap 3: Bootstrap 3 forms use .input-lg and .input-sm.

Form Label Size

You can add .col-form-label-sm and .col-form-label-lg to your labels so that the label size matches the form control.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="Small">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="Default size">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="Large">
    </div>
  </div>
</form>

New in Bootstrap 4

The .col-form-label-sm and .col-form-label-lg classes are new in Bootstrap 4.

Column Size

You can use Bootstrap's grid system to constrain input controls to a desired width.

<div class="form-row">
<div class="col-5">
<input type="text" class="form-control" placeholder=".col-5">
</div>
<div class="col-3">
<input type="text" class="form-control" placeholder=".col-3">
</div>
</div>

Help Text

Bootstrap 4 provides the .form-text class that can be used to indicate help text. You can combine this class with utility classes such as .text-muted.

You should also use the .aria-describedby attribute to associate the help text with the form control. This will ensure that screen readers can announce the help text when the user focuses on the form control.

<label for="accountId">Account Id</label>
<input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId">
<span id="helpAccountId" class="form-text text-muted">Your account ID is located at the top of your invoice.</span>

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 uses a different class to Bootstrap 3 for displaying help text.

Bootstrap 4: Bootstrap 4 uses .form-text for displaying help text.
Bootstrap 3: Bootstrap 3 forms use the .help-block class.

Static Control

You can use Bootstrap's .form-control-plaintext on a <p> element to present plain text next to a label (eg. instead of using an input field).

<form>
<div class="form-group row">
<label class="col-3 col-form-label mr-2">Username</label>
<div class="col-8">
<p class="form-control-plaintext">Bugsy</p>
</div>
</div>
<div class="form-group row">
<label for="pwd" class="col-3 col-form-label mr-2">Password</label>
<div class="col-8">
<input type="password" class="form-control" id="pwd" placeholder="Password">
</div>
</div>
</form>

Bootstrap 4 vs Bootstrap 3

Bootstrap 3 used the .form-control-static class for displaying static text. In Bootstrap 4, the .form-control-static class has been replaced with .form-control-plaintext.

Checkboxes & Radio Buttons

Bootstrap 4 provides the .form-check, .form-check-label, .form-check-input, and .form-check-inline classes for displaying checkboxes and radio buttons.

To display the checkboxes or radio buttons stacked, nest each one inside a <div> with the .form-check class.

Also, add the .form-check-label to the <label> tag, and .form-check-input to the <input> tag.

Inline

With Bootstrap 4, checkboxes and radio buttons are stacked by default (they appear above one another). You can display them inline by adding .form-check-inline to the surrounding <div>. Keep the .form-check-input on the <input> tag.

<!-- Checkboxes -->
<div class="form-check form-check-inline">

<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1">
<label class="form-check-label">1</label>
</div>

<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2">
<label class="form-check-label">2</label>
</div>

<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3">
<label class="form-check-label">3</label>
</div>

<!-- Radio Buttons -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1">
<label class="form-check-label">1</label>
</div>

<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2">
<label class="form-check-label">2</label>
</div>

<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3">
<label class="form-check-label">3</label>
</div>

</div>

Bootstrap 4 vs Bootstrap 3

Bootstrap 3: Uses .radio, .radio-inline, .checkbox, or .checkbox-inline to display checkboxes and radio buttons.
Bootstrap 4: Uses .form-check, .form-check-label, .form-check-input, and .form-check-inline.