Basic Input
Password
With Placeholder
Disabled Input
Add disabled attribute to disable input field.
Readonly Input
Add readonly="readonly" attribute to set field readonly.
Predefined Value
Add value="VALUE" attribute to set predefined value.
Static Text
Input text with help
Muted help text using .text-muted class.
Textarea & Select
Textual form controls—like <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.
Textarea
Basic Textarea
Textarea with Placeholder
Textarea with Description
Select
Basic Select
Custom select
To use custom select add class.custom-select to select.
Multiple select
To use multiple select add an attribute multiple="multiple".
Basic File Browser
Basic File Input
Basic Form Helpers
Block-level help text in forms can be created using .form-text. Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.
Form Helper Left
Form Helper Center
Form Helper Right
Inline Helper
.block-tag
Input Styling
Default Input Field
.round class for rounded field
.square class for squared field
Input Sizing Options
Use .input-xl class for extra large Input
Use .input-lg class for large Input
Use .input-sm class for small Input
Use .input-xs class for extra small Input
Use .input-xl class for extra large select
Use .input-lg class for large select
Use .input-sm class for small select
Use .input-xs class for extra small select
Server side Validation
We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.
Validation Tooltips
If your form layout allows it, you can swap the .{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
