Basic Form Inputs
Add class of .form-control with <input> tag
Hello !... This is static text

Input Sizes

Inputs Color Text

Color Inputs

Background-color Inputs

Input Grid
Add class of .form-control with <input> tag

Basic Inputs

Flex Inputs

Input Validation
Add class of .form-control with <input> tag

Input Validation

Success! You've done it.
Shucks, check the formatting of that and try again.
Sorry, that username's taken. Try another?
Input Alignment
Add class of .form-control with <input> tag
Input Group
Add class of .form-control with <input> tag

Basic Group Add-ons

@
%
$
$ .20
$ .20

Icon Group Addons

Log in

Show password
Forgot your password ?

Sign Up


Inline form


Modal Form


Form Text Inputs

Form control: select

The form below contains two dropdown menus (select lists):


Form Control Range and File

Add the .form-control-range class to input type"range" or .form-control-file to input type"file" to style a range control or a file field with full-width:

Input Group Size

Use the .input-sm class for small input groups and .input-lg for large inputs groups:

Input Group Buttons

Bootstrap Form Control States

Input Groups with Dropdown Button

Add a dropdown button in the input group. Note that you don't need the .dropdown wrapper, as you normally would.

Input Group Labels

Put labels outside of the input group, and remember that the value of the for attribute should match the id of the input.

Click on the label and it will bring focus to the input:

Check Buttons

Inline Checkbox Form Controls

Custom Range

To create a custom range menu, add the .custom-range class to the input element with type="range":

Custom File

To create a custom file upload, wrap a container element with a class of .custom-file around the input with type="file". Then add the .custom-control-input to it:

Custom Color file Input:

Default file: