Basic Inputs

Find helper text here for given textbox.

Sizing Options

For different sizes of Input, Use classes like .form-control-lg & .form-control-sm for Large, Small input box.

Horizontal form label sizing

Be sure to use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .form-control-sm.

Floating Label Inputs

For Floating Label Inputs, need to use .form-label-group class & add attribute disabled for disabled Floating Label Input.

File input

Input Validation States

You can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.

This is valid state.
This is invalid state.

Input Validation States with Tootltips

.{valid/invalid}-feedback classes for .{valid/invalid}-tooltip classes to display validation feedback in a styled tooltip.

Looks good!
Looks good!
Please provide a valid city.

Theme Customizer

Customize & Preview in Real Time


Menu Collapsed

Navbar Color