Inputs can be styled using the .form-control class. The readonly="..." attribute is also supported, which can be used to make read-only inputs.

<!-- Normal input -->
<input type="text" class="form-control" placeholder="Text input">

<!-- Read-only input -->
<input type="text" class="form-control" value="Read-only input" readonly="readonly">

Inputs with the class .form-control will take up the full width of the parent container and have no margins (margin: 0) by default. All the inputs on this page are placed inside containers with a width of 40rem (400px), and a maximum width of 100%. They are also styled to have a margin on the bottom using a utility class. None of this is shown in the code for the sake of conciseness. We recommend using a wrapper with the class .form-group inside forms. This will provide a margin between the elements. See the example here (opens in new tab).

Other types of inputs can also be styled using the .form-control class, such as type="number", type="email", etc. For type="checkbox", check the checkbox docs section, and for type="radio", check the radio docs section.

Sizing #

Different sizes of inputs are also available:

  • Large inputs can be created by adding the .form-control-lg class.
  • Small inputs can be created by adding the .form-control-sm class.
<!-- Large input -->
<input type="text" class="form-control form-control-lg" placeholder="Large input">

<!-- Regular input -->
<input type="text" class="form-control" placeholder="Regular input">

<!-- Small input -->
<input type="text" class="form-control form-control-sm" placeholder="Small input">

Disabled inputs #

Inputs can be disabled by adding the disabled="..." attribute to them. In order to just style the input to look disabled, only the class .disabled can be added. However, it should be noted that this does not actually disable the input, it only styles it.

<!-- Disabled input -->
<input type="text" class="form-control" disabled="disabled" value="Disabled input">

<!-- Not actually disabled, only styled to look the part -->
<input type="text" class="form-control disabled" value="Not actually disabled, only styled">

Invalid inputs #

Often times it is necessary to visually show the users that the input they have provided is invalid. This can be done by adding the class .is-invalid to the input, or by adding the .is-invalid class to a parent container with the class .form-group.

<!-- Invalid input -->
<input type="email" class="form-control is-invalid" placeholder="Email address" value="John Doe">

<!-- Invalid input through parent class -->
<div class="form-group is-invalid">
  <input type="email" class="form-control" placeholder="Email address" value="Jane Doe">

A complete example (with error messages) of invalid inputs can be found on this page (opens in new tab).

Alternate in dark mode #

Inputs with the class .alt-dm will have an alternate appearance in dark mode. Their appearance will be unchanged in light mode.

<!-- Alternate in dark mode (unchanged in light mode) -->
<input type="email" class="form-control alt-dm" value="">

These inputs are designed to look good and be usable on the colorful backgrounds in dark mode. For example, they can be used to great effect on contextual alerts in dark mode (opens in new tab).

Up next: Select