Basic form inputs

Examples of standard form controls supported in an example form layout. Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing. Labels in horizontal form require .col-form-label class.

Basic inputs
This is a static text
Basic selects
Basic file inputs
Form helpers
Left aligned helper
Centered helper
Right aligned helper
Left aligned badge
Centered badge
Right aligned badge
Left aligned badge
Centered badge
Right aligned badge
Inline text helper
Inline badge helper
Input icons
Validation states
Valid state helper
Valid state helper
Invalid state helper
Invalid state helper
Text options
Other text options work as well
Field options
Available in 12 columns sizes since it's based on 12 columns grid
Sizing options
Color options
Type options
Using input type="datetime-local"
Using input type="date"
Using input type="month"
Using input type="time"
Using input type="week"
Using input type="number"
Using input type="email"
Using input type="url"
Using input type="search"
Using input type="tel"
Using input type="color"
Using input type="range"