Bootstrap Forms overview

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Overview

Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.

We'll never share your email with anyone else.
<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Form text

Block-level or inline-level form text can be created using .form-text.

Associating form text with form controls

Form text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.

Form text below inputs can be styled with .form-text. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

Inline text can use any typical inline HTML element (be it a <span>, <small>, or something else) with nothing more than the .form-text class.

Must be 8-20 characters long.
<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

Disabled forms

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Add the disabled attribute to a <fieldset> to disable all the controls within. Browsers treat all native form controls (<input>, <select>, and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them.

However, if your form also includes custom button-like elements such as <a class="btn btn-*">...</a>, these will only be given a style of pointer-events: none, meaning they are still focusable and operable using the keyboard. In this case, you must manually modify these controls by adding tabindex="-1" to prevent them from receiving focus and aria-disabled="disabled" to signal their state to assistive technologies.

Disabled fieldset example
<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Accessibility

Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. The simplest way to achieve this is to use a <label> element, or—in the case of buttons—to include sufficiently descriptive text as part of the <button>...</button> content.

For situations where it’s not possible to include a visible <label> or appropriate text content, there are alternative ways of still providing an accessible name, such as:

  • <label> elements hidden using the .visually-hidden class
  • Pointing to an existing element that can act as a label using aria-labelledby
  • Providing a title attribute
  • Explicitly setting the accessible name on an element using aria-label

If none of these are present, assistive technologies may resort to using the placeholder attribute as a fallback for the accessible name on <input> and <textarea> elements. The examples in this section provide a few suggested, case-specific approaches.

While using visually hidden content (.visually-hidden, aria-label, and even placeholder content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.

Form styles

Enhanced form styling

Torus Kit enhances a standard Bootstrap forms by adding a couple of styles like transparent inputs or dark form. Inputs uses background-clip: padding-box which makes them nicely blend into background color. We’ve added a new shadow into :focus state of input fields, and added checks animation that can be disabled by setting $form-check-input-animation variable to false.

Dark form

When dealing with the dark form, add .form-dark class into the <form> element to convert text color to light one, and make it more readable.

We'll never share your email with anyone else.
<form class="form-dark">

  <div class="mb-3">
    <label for="exampleInputEmailDark" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmailDark" aria-describedby="emailHelpDark">
    <div id="emailHelpDark" class="form-text">We'll never share your email with anyone else.</div>
  </div>

  <div class="mb-3">
    <label for="exampleInputPasswordDark" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPasswordDark">
  </div>

  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheckDark">
    <label class="form-check-label" for="exampleCheckDark">Check me out</label>
  </div>

  <select class="form-select mb-3" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefaultDark1">
      <label class="form-check-label" for="flexRadioDefaultDark1">
        Default radio
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefaultDark2" checked>
      <label class="form-check-label" for="flexRadioDefaultDark2">
        Default checked radio
      </label>
    </div>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

Transparent inputs

Add .inputs-transparent class to the parent <form> to make the inputs transparent.

We'll never share your email with anyone else.
<form class="inputs-transparent">

  <div class="mb-3">
    <label for="exampleInputEmailTransparent" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmailTransparent" aria-describedby="emailHelpTransparent">
    <div id="emailHelpTransparent" class="form-text">We'll never share your email with anyone else.</div>
  </div>

  <div class="mb-3">
    <label for="exampleInputPasswordTransparent" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPasswordTransparent">
  </div>

  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheckTransparent">
    <label class="form-check-label" for="exampleCheckTransparent">Check me out</label>
  </div>

  <select class="form-select mb-3" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefaultTransparent1">
      <label class="form-check-label" for="flexRadioDefaultTransparent1">
        Default radio
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefaultTransparent2" checked>
      <label class="form-check-label" for="flexRadioDefaultTransparent2">
        Default checked radio
      </label>
    </div>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

Transparent inputs dark form

You can also combine a .inputs-transparent with .form-dark class.

We'll never share your email with anyone else.
<form class="form-dark inputs-transparent">

  <div class="mb-3">
    <label for="exampleInputEmailTransparentDark" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmailTransparentDark" aria-describedby="emailHelpTransparentDark">
    <div id="emailHelpTransparentDark" class="form-text">We'll never share your email with anyone else.</div>
  </div>

  <div class="mb-3">
    <label for="exampleInputPasswordTransparentDark" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPasswordTransparentDark">
  </div>

  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheckTransparentDark">
    <label class="form-check-label" for="exampleCheckTransparentDark">Check me out</label>
  </div>

  <select class="form-select mb-3" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefaultTransparentDark1">
      <label class="form-check-label" for="flexRadioDefaultTransparentDark1">
        Default radio
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefaultTransparentDark2" checked>
      <label class="form-check-label" for="flexRadioDefaultTransparentDark2">
        Default checked radio
      </label>
    </div>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>