core-logo

Bootstrap forms

Bootstrap forms support the following form controls: input, textarea, button, checkbox, radio, and select. Learn how to build various types of form layouts such as vertical form, horizontal form and inline from quickly and easily with the CoreUI.

On this page:



Form controls

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

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

<form>
  <div class="c-form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="c-form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="c-form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="c-form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="c-form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="c-form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="c-form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="c-form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

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

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

Sizing

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

<input class="c-form-control c-form-control-lg" type="text" placeholder=".c-form-control-lg">
<input class="c-form-control" type="text" placeholder="Default input">
<input class="c-form-control c-form-control-sm" type="text" placeholder=".c-form-control-sm">
<select class="c-form-control c-form-control-lg">
  <option>Large select</option>
</select>
<select class="c-form-control">
  <option>Default select</option>
</select>
<select class="c-form-control c-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="c-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 .c-form-control-plaintext class to remove the default form field styling and preserve the right margin and padding.

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

Range Inputs

Set horizontally scrollable range inputs using .c-form-control-range.

<form>
  <div class="c-form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="c-form-control-range" id="formControlRange">
  </div>
</form>

Checkboxes and radios

Default checkboxes and radios are improved upon with the help of .c-form-check, an individual class for both input types that adjusts the layout and behavior of their HTML elements. Checkboxes are for selecting one or many options in a list, while radios are for selecting only one option from many.

Disabled checkboxes and radios are supported, but to provide a not-allowed cursor on hover of the parent <label>, you want to add the disabled attribute to the .c-form-check-input. The disabled attribute will apply a brighter color to help show the input’s state.

Checkboxes and radios are made to support HTML-based form validation and give a brief, friendly labels. As such, our <input>s and <label>s are sibling parts as opposed to an <input> within a <label>. This is slightly more verbose as you must specify id and for attributes to relate the <input> and <label>.

Default (stacked)

By default, any amount of checkboxes and radios that are immediate sibling will be vertically stacked and spaced adequately with .c-form-check.

<div class="c-form-check">
  <input class="c-form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="c-form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="c-form-check">
  <input class="c-form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="c-form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="c-form-check">
  <input class="c-form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="c-form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="c-form-check">
  <input class="c-form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="c-form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="c-form-check">
  <input class="c-form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="c-form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Inline

Group checkboxes or radios on the same horizontal row by adding .c-form-check-inline to any .c-form-check.

<div class="c-form-check c-form-check-inline">
  <input class="c-form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="c-form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="c-form-check c-form-check-inline">
  <input class="c-form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="c-form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="c-form-check c-form-check-inline">
  <input class="c-form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="c-form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="c-form-check c-form-check-inline">
  <input class="c-form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="c-form-check-label" for="inlineRadio1">1</label>
</div>
<div class="c-form-check c-form-check-inline">
  <input class="c-form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="c-form-check-label" for="inlineRadio2">2</label>
</div>
<div class="c-form-check c-form-check-inline">
  <input class="c-form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="c-form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Without labels

Attach .c-position-static to inputs within .c-form-check that don’t have any label text. Remember to give some form of a label for assistive technologies.

<div class="c-form-check">
  <input class="c-form-check-input c-position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="c-form-check">
  <input class="c-form-check-input c-position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Layout

Some extra classes can be used to change this layout on a per-form basis.

Form groups

The .c-form-group class is the simplest way to attach some structure to forms. It gives a flexible class that supports proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom, but it picks up extra styles in .c-form-inline as needed. Use it with <fieldset>s, <div>s, or nearly any other component.

<form>
  <div class="c-form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="c-form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="c-form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="c-form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

Form grid

More complicated forms can be created using grid classes. Use those for form layouts that require many columns, varied widths, and additional alignment options.

<form>
  <div class="c-row">
    <div class="c-col">
      <input type="text" class="c-form-control" placeholder="First name">
    </div>
    <div class="c-col">
      <input type="text" class="c-form-control" placeholder="Last name">
    </div>
  </div>
</form>

Form row

You can swap .c-row for .c-form-row, a variation of standard grid row that overrides the default column gutters for tighter and more compact layouts.

<form>
  <div class="c-form-row">
    <div class="c-col">
      <input type="text" class="c-form-control" placeholder="First name">
    </div>
    <div class="c-col">
      <input type="text" class="c-form-control" placeholder="Last name">
    </div>
  </div>
</form>

Complicated layouts can also be built with the bootstrap grid system.

<form>
  <div class="c-form-row">
    <div class="c-form-group c-col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="c-form-control" id="inputEmail4">
    </div>
    <div class="c-form-group c-col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="c-form-control" id="inputPassword4">
    </div>
  </div>
  <div class="c-form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="c-form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="c-form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="c-form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="c-form-row">
    <div class="c-form-group c-col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="c-form-control" id="inputCity">
    </div>
    <div class="c-form-group c-col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="c-form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="c-form-group c-col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="c-form-control" id="inputZip">
    </div>
  </div>
  <div class="c-form-group">
    <div class="c-form-check">
      <input class="c-form-check-input" type="checkbox" id="gridCheck">
      <label class="c-form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="c-btn c-btn-primary">Sign in</button>
</form>

Horizontal form

Build horizontal forms with bootstrap grid by adding the .c-row class to form groups and using the .c-col-*-* classes to set the width of your labels and controls. Remember to add .c-col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.

If you want to use margin or padding utilities to build that perfect alignment you want.

Radios
Checkbox
<form>
  <div class="c-form-group c-row">
    <label for="inputEmail3" class="c-col-sm-2 c-col-form-label">Email</label>
    <div class="c-col-sm-10">
      <input type="email" class="c-form-control" id="inputEmail3">
    </div>
  </div>
  <div class="c-form-group c-row">
    <label for="inputPassword3" class="c-col-sm-2 c-col-form-label">Password</label>
    <div class="c-col-sm-10">
      <input type="password" class="c-form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="c-form-group">
    <div class="c-row">
      <legend class="c-col-form-label c-col-sm-2 c-pt-0">Radios</legend>
      <div class="c-col-sm-10">
        <div class="c-form-check">
          <input class="c-form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="c-form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="c-form-check">
          <input class="c-form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="c-form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="c-form-check disabled">
          <input class="c-form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="c-form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="c-form-group c-row">
    <div class="c-col-sm-2">Checkbox</div>
    <div class="c-col-sm-10">
      <div class="c-form-check">
        <input class="c-form-check-input" type="checkbox" id="gridCheck1">
        <label class="c-form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="c-form-group c-row">
    <div class="c-col-sm-10">
      <button type="submit" class="c-btn c-btn-primary">Sign in</button>
    </div>
  </div>
</form>
Horizontal form label sizing

Remember to use .c-col-form-label-sm or .c-col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .c-form-control-lg and .c-form-control-sm.

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

Column sizing

As pointed out in the previous examples, bootstrap’s grid system allows placing any number of .c-cols inside a .c-row or .c-form-row. They’ll divide the possible width equally between them.

<form>
  <div class="c-form-row">
    <div class="c-col-7">
      <input type="text" class="c-form-control" placeholder="City">
    </div>
    <div class="c-col">
      <input type="text" class="c-form-control" placeholder="State">
    </div>
    <div class="c-col">
      <input type="text" class="c-form-control" placeholder="Zip">
    </div>
  </div>
</form>

Auto-sizing

Following example uses a flexbox to center the contents and changes vertically .c-col to .c-col-auto so that your columns simply use as much space as needed. Put a different way, and the column sizes itself based on the contents.

@
<form>
  <div class="c-form-row c-align-items-center">
    <div class="c-col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="c-form-control c-mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="c-col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="c-input-group c-mb-2">
        <div class="c-input-group-prepend">
          <div class="c-input-group-text">@</div>
        </div>
        <input type="text" class="c-form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="c-col-auto">
      <div class="c-form-check c-mb-2">
        <input class="c-form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="c-form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="c-col-auto">
      <button type="submit" class="c-btn c-btn-primary c-mb-2">Submit</button>
    </div>
  </div>
</form>

You can then remix that once again with size-specific column classes.

@
<form>
  <div class="c-form-row c-align-items-center">
    <div class="c-col-sm-3 c-my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="c-form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="c-col-sm-3 c-my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="c-input-group">
        <div class="c-input-group-prepend">
          <div class="c-input-group-text">@</div>
        </div>
        <input type="text" class="c-form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="c-col-auto c-my-1">
      <div class="c-form-check">
        <input class="c-form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="c-form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="c-col-auto c-my-1">
      <button type="submit" class="c-btn c-btn-primary">Submit</button>
    </div>
  </div>
</form>

Moreover, of course, custom form controls are supported.

<form>
  <div class="c-form-row c-align-items-center">
    <div class="c-col-auto c-my-1">
      <label class="c-mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="c-custom-select c-mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="c-col-auto c-my-1">
      <div class="c-custom-control c-custom-checkbox c-mr-sm-2">
        <input type="checkbox" class="c-custom-control-input" id="customControlAutosizing">
        <label class="c-custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="c-col-auto c-my-1">
      <button type="submit" class="c-btn c-btn-primary">Submit</button>
    </div>
  </div>
</form>

Inline forms

Use the .form-inline class to show a group of labels, form controls, and buttons on a single row. Form controls inside inline forms vary slightly from their default states.

  • Controls are display: flex, collapsing any HTML white space and allowing you to provide alignment control with spacing and flexbox utilities.
  • Controls and input groups receive width: auto to override the Bootstrap default width: 100%.
  • Controls only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.

If you want to address the width and alignment of individual form manually controls with spacing utilities (as shown below). Lastly, remember to always include a <label> with each form control.

@
<form class="c-form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="c-form-control c-mb-2 c-mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="c-input-group c-mb-2 c-mr-sm-2">
    <div class="c-input-group-prepend">
      <div class="c-input-group-text">@</div>
    </div>
    <input type="text" class="c-form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="c-form-check c-mb-2 c-mr-sm-2">
    <input class="c-form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="c-form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="c-btn c-btn-primary c-mb-2">Submit</button>
</form>

Custom form controls and selects are also supported.

<form class="c-form-inline">
  <label class="c-my-1 c-mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="c-custom-select c-my-1 c-mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="c-custom-control c-custom-checkbox c-my-1 c-mr-sm-2">
    <input type="checkbox" class="c-custom-control-input" id="customControlInline">
    <label class="c-custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="c-btn c-btn-primary c-my-1">Submit</button>
</form>
Alternatives to hidden labels

Assistive technologies like screen readers will have problems with your forms if you don’t add a label for each input. For those inline forms, you can hide the labels applying the .sr-only class. There are more alternative ways of providing a label for assistive technologies, such as the aria-label, aria-labelledby or title attribute.

Help text

Block-level help text in forms can be created using .c-form-text (previously known as .c-help-block in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like .c-text-muted.

Adding a help text to form controls

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

Help text below inputs can be styled with .c-form-text. This class includes display: block and adds some top margin for natural 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">Password</label>
<input type="password" id="inputPassword5" class="c-form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="c-form-text c-text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

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

Must be 8-20 characters long.
<form class="c-form-inline">
  <div class="c-form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="c-form-control c-mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="c-text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Disabled forms

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

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

Add the disabled attribute to a <fieldset> to disable all the controls within.

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

Validation

Grant valuable, actionable feedback to your users and customers with HTML5 form validation–available in all our supported browsers. Choose from the browser default validation feedback, or perform custom messages with bootstrap’s built-in classes.

We currently recommend to use custom validation styles, as native browser default validation messages are not consistently presented to assistive technologies in all browsers.

How it works

How to use Bootstrap form validation:

  • HTML form validation is implemented via CSS’s two pseudo-classes, :invalid and :valid. It refers to <input>, <select>, and <textarea> elements.
  • Bootstrap scopes the :invalid and :valid styles to parent .c-was-validated class regularly applied to the <form>. Otherwise, any required field without a value gives up as invalid on page load. This way, you may choose when to activate them.
  • To reset the surface of the form (for instance, in the case of dynamic form submissions using AJAX), delete the .c-was-validated class from the <form> again after submission.
  • Fallback, .c-is-invalid and .c-is-valid classes may be utilized alternately of the pseudo-classes for server side validation. They do not need a .c-was-validated parent class.
  • Due to limitations in how CSS works, we cannot (at present) apply styles to a <label> that appears before a form control in the DOM without the help of custom JavaScript.
  • Feedback messages may utilize the browser defaults or our custom feedback styles with extra HTML and CSS.
  • You can give custom validity messages with setCustomValidity in JavaScript.

Please consider the following demos for bootstrap’s custom form validation styles, optional server-side classes, and browser defaults.

Custom styles

For custom Bootstrap form validation alerts, you’ll have to add the novalidate boolean attribute to your <form>. This block the browser default feedback tooltips, but still gives access to the form validation APIs. Please try to submit the form below; JavaScript will intercept the submit button and relay feedback to you.

When attempting to submit, you’ll see the :invalid and :valid styles applied to your form controls.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.
<form class="needs-validation" novalidate>
  <div class="c-form-row">
    <div class="c-col-md-4 c-mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="c-form-control" id="validationCustom01" value="Mark" required>
      <div class="c-valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="c-col-md-4 c-mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="c-form-control" id="validationCustom02" value="Otto" required>
      <div class="c-valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="c-col-md-4 c-mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="c-input-group">
        <div class="c-input-group-prepend">
          <span class="c-input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="c-form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
        <div class="c-invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="c-form-row">
    <div class="c-col-md-6 c-mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="c-form-control" id="validationCustom03" required>
      <div class="c-invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="c-col-md-3 c-mb-3">
      <label for="validationCustom04">State</label>
      <select class="c-custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="c-invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="c-col-md-3 c-mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="c-form-control" id="validationCustom05" required>
      <div class="c-invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="c-form-group">
    <div class="c-form-check">
      <input class="c-form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="c-form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="c-invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="c-btn c-btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('c-was-validated');
      }, false);
    });
  }, false);
})();
</script>

Browser defaults

If you’re not interested in custom validation feedback messages or writing JavaScript to change form behaviors? You can use the browser defaults. Try submitting the form below.

While those feedback styles cannot be styled by CSS, you can still customize the feedback text through JavaScript.

@
<form>
  <div class="c-form-row">
    <div class="c-col-md-4 c-mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="c-form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="c-col-md-4 c-mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="c-form-control" id="validationDefault02" value="Otto" required>
    </div>
    <div class="c-col-md-4 c-mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="c-input-group">
        <div class="c-input-group-prepend">
          <span class="c-input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="c-form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="c-form-row">
    <div class="c-col-md-6 c-mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="c-form-control" id="validationDefault03" required>
    </div>
    <div class="c-col-md-3 c-mb-3">
      <label for="validationDefault04">State</label>
      <select class="c-custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="c-col-md-3 c-mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="c-form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="c-form-group">
    <div class="c-form-check">
      <input class="c-form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="c-form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="c-btn c-btn-primary" type="submit">Submit form</button>
</form>

Server side

We suggest using client-side validation, but in fact you require server side, you can show invalid and valid form fields with .c-is-invalid and .c-is-valid. Note that .c-invalid-feedback is also maintained with these classes.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.
<form>
  <div class="c-form-row">
    <div class="c-col-md-4 c-mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="c-form-control c-is-valid" id="validationServer01" value="Mark" required>
      <div class="c-valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="c-col-md-4 c-mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="c-form-control c-is-valid" id="validationServer02" value="Otto" required>
      <div class="c-valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="c-col-md-4 c-mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="c-input-group">
        <div class="c-input-group-prepend">
          <span class="c-input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="c-form-control c-is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
        <div class="c-invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="c-form-row">
    <div class="c-col-md-6 c-mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="c-form-control c-is-invalid" id="validationServer03" required>
      <div class="c-invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="c-col-md-3 c-mb-3">
      <label for="validationServer04">State</label>
      <select class="c-custom-select c-is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="c-invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="c-col-md-3 c-mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="c-form-control c-is-invalid" id="validationServer05" required>
      <div class="c-invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="c-form-group">
    <div class="c-form-check">
      <input class="c-form-check-input c-is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="c-form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="c-invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="c-btn c-btn-primary" type="submit">Submit form</button>
</form>

Supported elements

Following example forms show native textual <input>s above, but form validation styles are available for our custom form controls, too.

  • <input>s and <textarea>s with .c-form-control (including up to one .c-form-control in input groups)
  • <select>s with .c-form-control or .c-custom-select
  • .c-form-checks
  • .c-custom-checkboxs and .c-custom-radios
  • .c-custom-file
Please enter a message in the textarea.
Example invalid feedback text
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback
<form class="c-was-validated">
  <div class="c-mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="c-form-control c-is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="c-invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="c-custom-control c-custom-checkbox c-mb-3">
    <input type="checkbox" class="c-custom-control-input" id="customControlValidation1" required>
    <label class="c-custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="c-invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="c-custom-control c-custom-radio">
    <input type="radio" class="c-custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="c-custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="c-custom-control c-custom-radio c-mb-3">
    <input type="radio" class="c-custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="c-custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="c-invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="c-form-group">
    <select class="c-custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="c-invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="c-custom-file">
    <input type="file" class="c-custom-file-input" id="validatedCustomFile" required>
    <label class="c-custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="c-invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Tooltips

If your form design allows it, you can swap the .c-{valid|invalid}-feedback classes for .c-{valid|invalid}-tooltip classes to present validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning. In the following example, our column classes have this, but your project can require an alternative setup.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
<form class="needs-validation" novalidate>
  <div class="c-form-row">
    <div class="c-col-md-4 c-mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="c-form-control" id="validationTooltip01" value="Mark" required>
      <div class="c-valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="c-col-md-4 c-mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="c-form-control" id="validationTooltip02" value="Otto" required>
      <div class="c-valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="c-col-md-4 c-mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="c-input-group">
        <div class="c-input-group-prepend">
          <span class="c-input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="c-form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="c-invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="c-form-row">
    <div class="c-col-md-6 c-mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="c-form-control" id="validationTooltip03" required>
      <div class="c-invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="c-col-md-3 c-mb-3">
      <label for="validationTooltip04">State</label>
      <select class="c-custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="c-invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="c-col-md-3 c-mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="c-form-control" id="validationTooltip05" required>
      <div class="c-invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="c-btn c-btn-primary" type="submit">Submit form</button>
</form>

Custom forms

For more customization and cross-browser consistency, use our utterly custom form components to substitute the browser defaults. They’re made on top of semantic and friendly markup, so they’re solid replacements for each default form control.

Checkboxes and radios

Each checkbox and radio is wrapped in a <div> with a sibling <span> to create our custom control and a <label> for the accompanying text. This is the same way as our default .c-form-check.

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

Bootstrap CSS hides the default <input> with opacity and uses the .c-custom-control-label to creates a new custom form pointer in its place with ::before and ::after.

Checkboxes

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

Custom checkboxes can also use the :indeterminate pseudo-class while manually set via JavaScript

var checkbox = document.querySelector('.your-checkbox')
checkbox.indeterminate = true

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

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

Radios

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

Inline

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

Disabled

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

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

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

Switches

//TODO: zduplikowany content A switch has the markup of a custom checkbox but uses the .c-custom-switch class to render a toggle switch. Switches also support the disabled attribute.

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

Select menu

Custom <select> menus need only a custom class, .c-custom-select to trigger the custom styles.

<select class="c-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>

If you want to choose from small and large custom selects to match similarly sized text inputs.

<select class="c-custom-select c-custom-select-lg c-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="c-custom-select c-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="c-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="c-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>

Range

Build custom <input type="range"> controls with .c-custom-range. The track and thumb are both styled to look the identical across browsers.

<label for="customRange1">Example range</label>
<input type="range" class="c-custom-range" id="customRange1">

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="c-custom-range" min="0" max="5" id="customRange2">

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

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

File browser

The file input is the most gnarly of the bunch and needs extra JavaScript if you’d like to hook them up with useful Choose file… and selected filename text.

<div class="c-custom-file">
  <input type="file" class="c-custom-file-input" id="customFile">
  <label class="c-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

//TODO: zduplikowany content 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="c-custom-file">
  <input type="file" class="c-custom-file-input" id="customFileLang" lang="es">
  <label class="c-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="c-custom-file">
  <input type="file" class="c-custom-file-input" id="customFileLangHTML">
  <label class="c-custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>