Bootstrap Forms

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="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>

  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>

  <div class="form-group 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 controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Be sure to explore our custom forms to further style <select>s.

<form>

  <!-- Input -->
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>

  <!-- Select -->
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

  <!-- Multiple select -->
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

  <!-- Textarea -->
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>

</form>

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Readonly plain text

If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
Free

Color variations

Forms doesn’t need to be white background only. Default Bootstrap <input> elements has a solid background and border color which doesn’t blend with different backgrounds very well. Torus Kit enhances default forms and bring new styles with light, dark and transparent variations.

Light form

When the form has a white or light background, there’s no need to add any style fo the <form>.

<form class="bg-primary bg-a-10">
  <div class="form-row">

    <div class="form-group col">
      <label for="exampleLight">Your Name</label>
      <input class="form-control " id="exampleLight" type="text" placeholder="Default input">
    </div>

    <div class="form-group col">
      <label for="exampleLightSelect">Example select</label>
      <select class="form-control" id="exampleLightSelect">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>

  </div>
</form>

Dark form

When the <form> with dark background is presented, add .form-dark class to <form> to make an inputs readable.

<form class="bg-dark form-dark">
  <div class="form-row">

    <div class="form-group col">
      <label for="exampleDark">Your Name</label>
      <input class="form-control " id="exampleDark" type="text" placeholder="Default input">
    </div>

    <div class="form-group col">
      <label for="exampleDarkSelect">Example select</label>
      <select class="form-control" id="exampleDarkSelect">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>

  </div>
</form>

Transparent inputs

The .input-transparent class added into <form> allows the remove the input background and nicely blend it into the form color.

<!-- Light form -->
<form class="bg-primary bg-a-10 input-transparent">
  <div class="form-row">

    <div class="form-group col">
      <label for="exampleLightTransparent">Your Name</label>
      <input class="form-control " id="exampleLightTransparent" type="text" placeholder="Default input">
    </div>

    <div class="form-group col">
      <label for="exampleLightTransparentSelect">Example select</label>
      <select class="form-control" id="exampleLightTransparentSelect">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>

  </div>
</form>

<!-- Dark form -->
<form class="bg-dark form-dark input-transparent">
  <div class="form-row">

    <div class="form-group col">
      <label for="exampleDarkTransparent">Your Name</label>
      <input class="form-control " id="exampleDarkTransparent" type="text" placeholder="Default input">
    </div>

    <div class="form-group col">
      <label for="exampleDarkTransparentSelect">Example select</label>
      <select class="form-control" id="exampleDarkTransparentSelect">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>

  </div>
</form>

HTML input types

Some of the HTML input type you can use in your code.

<form>
    <!-- Input -->
    <div class="form-group">
      <label for="exampleTextInput" class="form-control-label">Text</label>
      <input class="form-control" type="text" id="exampleTextInput" placeholder="Your name">
    </div>

    <!-- Email -->
    <div class="form-group">
      <label for="exampleEmailInput" class="form-control-label">Email</label>
      <input class="form-control" type="email" id="exampleEmailInput" placeholder="Your Email">
    </div>

    <!-- Password -->
    <div class="form-group">
      <label for="examplePasswordInput" class="form-control-label">Password</label>
      <input class="form-control" type="password" id="examplePasswordInput" placeholder="Enter password">
    </div>

    <!-- Date -->
    <div class="form-group">
      <label for="exampleDateInput" class="form-control-label">Date</label>
      <input class="form-control" type="date" value="2080-01-01" id="exampleDateInput">
    </div>

    <!-- Time -->
    <div class="form-group">
      <label for="exampleTimeInput" class="form-control-label">Time</label>
      <input class="form-control" type="time" value="10:30:00" id="exampleTimeInput">
    </div>

    <!-- Number -->
    <div class="form-group">
      <label for="exampleNumberInput" class="form-control-label">Number</label>
      <input class="form-control" type="number" value="0" id="exampleNumberInput">
    </div>

    <!-- Color -->
    <div class="form-group">
      <label for="exampleColorInput" class="form-control-label">Color</label>
      <input class="form-control" type="color" value="#0000ff" id="exampleColorInput">
    </div>
</form>

File input

For file inputs, swap the .form-control for .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Custom forms

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

Free

Number input

Replace the browser’s default <input type="number"> with consistent style by adding .custom-number class to .form-control. To enable value increment/decrement add .btn-custom-number-down (decrement value) and .btn-custom-number-up (increment value) to corresponding button along with a target="{id}" where {id} is an id of the <input type="number">.

Example number input

This example has been created with .input-group-prepend, .input-group-append Bootstrap Input group component.

<div class="input-group w-auto w-sm-50 w-xl-25">
  <!-- prepend "-" -->
  <div class="input-group-prepend">
    <button role="button" class="input-group-text btn-custom-number-down" target="#numbersExample">
      <i class="tk-icon-minus"></i>
    </button>
  </div>
  <!-- input -->
  <input type="number" id="numbersExample" class="form-control custom-number" placeholder="Number" min="0" max="20" aria-label="Username" aria-describedby="numbers">
  <!-- append "+" -->
  <div class="input-group-append">
    <button role="button" class="input-group-text btn-custom-number-up" target="#numbersExample">
      <i class="tk-icon-plus"></i>
    </button>
  </div>
</div>

Example flat number input

Adding .input-addon-flat class to .input-group will remove any borders inside this input group.

<div class="input-group input-addon-flat w-auto w-sm-50 w-xl-25">
  <!-- input "-" -->
  <input type="number" id="numbersExample2" class="form-control custom-number" placeholder="Number" min="0" max="20" aria-label="Number" aria-describedby="numbers">
  <!-- append "-" -->
  <div class="input-group-append">
    <button role="button" class="input-group-text btn btn-custom-number-down" target="#numbersExample2">
      <i class="tk-icon-minus"></i>
    </button>
    <button role="button" class="input-group-text btn btn-custom-number-up" target="#numbersExample2">
      <i class="tk-icon-plus"></i>
    </button>
  </div>
</div>

Checkboxes and radios

Each checkbox and radio <input> and <label> pairing is wrapped in a <div> to create our custom control. Structurally, this is the same approach as our default .form-check.

We use the sibling selector (~) for all our <input> states—like :checked—to properly style our custom form indicator. When combined with the .custom-control-label class, we can also style the text for each item based on the <input>’s state.

We hide the default <input> with opacity and use the .custom-control-label to build a new custom form indicator in its place with ::before and ::after. Unfortunately we can’t build a custom one from just the <input> because CSS’s content doesn’t work on that element.


Checkboxes

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck">
  <label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>

Custom checkboxes can also utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

If you’re using jQuery, something like this should suffice:

$('.your-checkbox').prop('indeterminate', true)


Radios

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Inline

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Disabled

Custom checkboxes and radios can also be disabled. Add the disabled boolean attribute to the <input> and the custom indicator and label description will be automatically styled.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

Switches

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Select menu

Custom <select> menus need only a custom class, .custom-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

You may also choose from small and large custom selects to match our similarly sized text inputs.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

The multiple attribute is also supported:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

As is the size attribute:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
Free

Transparent custom inputs

Similar to default inputs, custom ones can also have transparent background. Add .input-transparent to <form>.

<div class="bg-dark p-4 form-dark input-transparent">

  <!-- Select -->
  <select class="custom-select custom-control">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <!-- Checkbox -->
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheckDark">
    <label class="custom-control-label" for="customCheckDark">Check this custom checkbox</label>
  </div>

  <!-- Radio -->
  <div class="custom-control custom-radio">
    <input type="radio" id="customRadio1Dark" name="customRadioDark" class="custom-control-input">
    <label class="custom-control-label" for="customRadio1Dark">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="customRadio2Dark" name="customRadioDark" class="custom-control-input">
    <label class="custom-control-label" for="customRadio2Dark">Or toggle this other custom radio</label>
  </div>

  <!-- Switch -->
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch1Dark">
    <label class="custom-control-label" for="customSwitch1Dark">Toggle this switch element</label>
  </div>

</div>

Range

Create custom <input type="range"> controls with .custom-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it. But Torus Kit does! Check Range progress that also works in the Chrome!

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1" min="10" max="10000">

Range inputs have implicit values for min and max0 and 100, respectively. You may specify new values for those using the min and max attributes.

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
Free

Progress range

Add .custom-range-progress class to .custom-range to add a color to progress track. This Torus Kit features also works in Chrome!

<label for="customRange4">Example range</label>
<input type="range" class="custom-range custom-range-progress" id="customRange4">

<label for="customRange5">Example range</label>
<input type="range" class="custom-range custom-range-progress" min="0" max="200" value="50" id="customRange5">

<label for="customRange6">Example range</label>
<input type="range" class="custom-range custom-range-progress" min="0" max="1000" value="400" step="50" id="customRange6">

File browser

The recommended plugin to animate custom file input: bs-custom-file-input, that’s what we are using currently here in our docs.

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

We hide the default file <input> via opacity and instead style the <label>. The button is generated and positioned with ::after. Lastly, we declare a width and height on the <input> for proper spacing for surrounding content.


Translating or customizing the strings with SCSS

The :lang() pseudo-class is used to allow for translation of the “Browse” text into other languages. Override or add entries to the $custom-file-text Sass variable with the relevant language tag and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Here’s lang(es) in action on the custom file input for a Spanish translation:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using the lang attribute on the <html> element or the Content-Language HTTP header, among other methods.

Translating or customizing the strings with HTML

Bootstrap also provides a way to translate the “Browse” text in HTML with the data-browse attribute which can be added to the custom input label (example in Dutch):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>