Base

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

Disabled state

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

Color

Select

Custom <select> menus need only a custom class, .form-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.

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


The multiple attribute is also supported


Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.

Checkbox and Radio

Browser default checkboxes and radios are replaced with the help of .form-check, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.


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


Put your checkboxes, radios, and switches on the opposite side with the .form-check-reverse modifier class.


Omit the wrapping .form-check for checkboxes and radios that have no label text.

Switches

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


Sizing

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

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value.

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.

File input

Range

Create custom <input type="range"> controls with .form-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.


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".

Floating label

Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with Bootstrap’s textual form fields. A placeholder is required on each <input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).

Other than .form-control, floating labels are only available on .form-selects. They work in the same way, but unlike <input>s, they’ll always show the <label> in its floated state. Selects with size and multiple are not supported.


Floating labels also support sizing classes.

CS

Charlie Stone

Art Director

Upcoming events

12:00

Donec laoreet fringilla justo a pellentesque

13:20

Nunc quis massa nec enim

14:00

Praesent sit amet

Reports

Navigation

Settings

Performance

CPU Load
60%
CPU Temparature
42°
RAM Usage
6,532 MB

Customer care

Reports

Projects

May 14, 2020

Upcoming events

12:00

Donec laoreet fringilla justo a pellentesque

13:20

Nunc quis massa nec enim

14:00

Praesent sit amet