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.



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.


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.


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


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


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.




CPU Load
CPU Temparature
RAM Usage
6,532 MB

Customer care



May 14, 2020

Upcoming events


Donec laoreet fringilla justo a pellentesque


Nunc quis massa nec enim


Praesent sit amet