Form controls
Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more. Additional classes can be used to vary this layout on a per-form basis.
Default Preview
Code Example
<div class="form-choices-control"> <select class="form-choices"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div>
State Preview
For success, focus, and error use classes is-valid, is-focus, is-invalid to input class
Size Preview
Use .form-control-lg or .form-control-sm with .form-control for large or small input box.
Code Example
<div class="form-group"> <label class="form-label" for="default-01">Input text label</label> <div class="form-control-wrap"> <input type="text" class="form-control" id="default-01" placeholder="Input placeholder"> </div></div> <div class="form-group"> <label class="form-label" for="default-02">Textarea label</label> <div class="form-control-wrap"> <textarea class="form-control" id="default-textarea">Large text area content</textarea> </div> </div>
Select Styles
Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.
Default Preview
Code Example
<select class="form-select"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option></select>
Size Preview
Use .form-select-lg or .form-select-sm with .form-select for large or small input box.
Code Example
<select class="form-select form-select-lg"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option></select><select class="form-select form-select-sm"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option></select>
The multiple attribute is also supported:
Code Example
<select class="form-select" multiple> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option></select>
As is the size attribute:
Code Example
<select class="form-select" size="3"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option></select>
Disabled Preview
Code Example
<select class="form-select" disabled> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option></select>
Checkbox Styles
To create custom checkbox, wrapped with <div> each checkbox <input> & <label> using .form-check class.
Default
Checked
Disabled
Check disabled
Checkbox size
For large or small size of .form-check, use .form-check-{lg|sm} with .form-check class.
Code Example
<div class="form-check"> <input type="checkbox" class="form-check-input" id="formCheck1"> <label class="form-check-label" for="formCheck1">Option Label</label></div><div class="form-check form-check-lg"> <input type="checkbox" class="form-check-input" id="formCheck2"> <label class="form-check-label" for="formCheck2">Option Label</label></div>
Radio Style
To create custom control, wrapped with <div> each radio <input> & <label> using .form-check class.
Default
Checked
Disabled
Check disabled
Radio size
For large or small size of .form-check, use .form-check-{lg|sm} with .form-check class.
Code Example
<div class="form-check"> <input type="radio" class="form-check-input" id="formRadio1"> <label class="form-check-label" for="formRadio1">Option Label</label> </div> <div class="form-check form-check-lg"> <input type="radio" class="form-check-input" id="formRadio2"> <label class="form-check-label" for="formRadio2">Option Label</label> </div>
Switch Style
The switch markup of a .form-check checkbox but uses the .form-switch class to render a toggle switch.
Default
Checked
Disabled
Check disabled
Switch size
Code Example
<div class="form-check form-switch"> <input type="checkbox" class="form-check-input" id="formSwitch1"> <label class="form-check-label" for="formSwitch1">Option Label</label> </div> <div class="form-check form-switch form-switch-lg"> <input type="checkbox" class="form-check-input" id="formSwitch2"> <label class="form-check-label" for="formSwitch2">Option Label</label> </div>