Here’s a quick example to demonstrate simple input field. Add .light-focus
to .form-control
to get lighter border on focus.
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
Add .form-control-rounded
to .form-control
to make fields rounded.
<input type="email" class="form-control form-control-rounded" aria-describedby="..." placeholder="...">
<input type="password" class="form-control form-control-solid-bordered form-control-rounded" aria-describedby="..." placeholder="...">
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.
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Add the disabled
boolean attribute on an input to prevent user interactions and make it appear lighter.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Set heights using classes like .form-control-lg
and .form-control-sm
.
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>
A switch has the markup of a custom checkbox but uses the .form-switch
class to render a toggle switch. Switches also support the disabled
attribute.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
We offer some different custom styles for input fields to make your forms more beautiful.
<input type="text" class="form-control form-control-solid-bordered" aria-describedby="..." placeholder="...">
<input type="text" class="form-control form-control-solid" aria-describedby="..." placeholder="...">
<input type="text" class="form-control form-control-material" aria-describedby="..." placeholder="...">
<input type="text" class="form-control form-control-transparent" aria-describedby="..." placeholder="...">
Wrap a pair of <input class="form-control">
and <label>
elements in .form-floating
to enable floating labels with Bootstrap’s textual form fields. A placeholder
is required on each <input>
as our method of CSS-only floating labels uses the :placeholder-shown
pseudo-element. Also note that the <input>
must come first so we can utilize a sibling selector (e.g., ~
).
<input type="text" class="form-control form-control-solid-bordered" aria-describedby="..." placeholder="...">
<input type="text" class="form-control form-control-solid" aria-describedby="..." placeholder="...">
<input type="text" class="form-control form-control-material" aria-describedby="..." placeholder="...">
<input type="text" class="form-control form-control-transparent" aria-describedby="..." placeholder="...">
Block-level or inline-level form text can be created using .form-text
.
aria-describedby
attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked="">
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
Group checkboxes or radios on the same horizontal row by adding .form-check-inline
to any .form-check
.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
Create custom <input type="range">
controls with .form-range
. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Edge Legacy and Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
By default, range inputs “snap” to integer values. To change this, you can specify a step
value. In the example below, we double the number of steps by using step="0.5"
.
<label for="customRange3" class="form-label">Range with steps</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">