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

CheckBox & Radio Buttons


Checkbox
Checkbox Inline
Radio Buttons
Radio Buttons Inline

Form control: select

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


Form Control Sizing

Change the size of the form control with .form-control-sm or .form-control-lg:

Form Control Plain Text

Use the .form-control-plaintext if you want to style the input field as plain text:

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 Groups

The .input-group class is a container to enhance an input by adding an icon, text or a button in front (.input-group-prepend) or behind (.input-group-append) the input field as a "help text".

Use the .input-group-text class to style the specified help text.

@
@example.com

Input Group Size

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

Small
Default
Large

Multiple Inputs and Addons

Person
One Two Three

Input Group with Checkboxes and Radios

You can also use checkboxes or radio buttons instead of text:

Input Group Buttons

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:

@example.com

Custom Radio Buttons

To create a custom radio button, wrap a container element, like div, with a class of .custom-control and .custom-radio around the radio button. Then add the .custom-control-input to the radio button.

Tip: If you use labels for accompanying text, add the .custom-control-label class to it. Note that the value of the for attribute should match the id of the radio:


Inline Custom Form Controls

If you want the custom form controls to sit side by side (inline), add the .custom-control-inline to the wrapper/container:

Custom Select Menu

To create a custom select menu, add the .custom-select class to the select element:

Custom Select Menu Sizing

Use the .custom-select-sm class to create a small select menu and the .custom-select-lg class for a large one:

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 file:

Default file: