Example
Form controls are styled with a mix of Sass and CSS variables, allowing them to adapt to color modes
and support any customization method.
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="mb-3"> <label for="exampleFormControlInput1"
class="form-label">Email address</label> <input type="email"
class="form-control" id="exampleFormControlInput1"
placeholder="name@example.com"> </div> <div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example
textarea</label> <textarea class="form-control"
id="exampleFormControlTextarea1" rows="3"></textarea> </div>
Sizing
Set heights using classes like .form-control-xs, .form-control-sm,
.form-control-lg, and .form-control-xl.
<input class="form-control form-control-xs mb-2" type="text" placeholder=".form-control-xs" aria-label=".form-control-xs example">
<input class="form-control form-control-sm mb-2" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
<input class="form-control mb-2" type="text" placeholder=".form-control" aria-label="default input example">
<input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control form-control-xl" type="text" placeholder=".form-control-xl" aria-label=".form-control-xl example">
<input class="form-control form-control-xs mb-2" type="text"
placeholder=".form-control-xs" aria-label=".form-control-xs example">
<input class="form-control form-control-sm mb-2" type="text"
placeholder=".form-control-sm" aria-label=".form-control-sm example">
<input class="form-control mb-2" type="text"
placeholder=".form-control" aria-label="default input example"> <input
class="form-control form-control-lg mb-2" type="text"
placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control form-control-xl" type="text"
placeholder=".form-control-xl" aria-label=".form-control-xl example">
Form text
Block-level or inline-level form text can be created using .form-text.
Form text should be explicitly associated with the form control it relates to using the
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.
Form text below inputs can be styled with .form-text. If a block-level element will be
used, a top margin is added for easy spacing from the inputs above.
<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>
<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>
Inline text can use any typical inline HTML element (be it a <span>,
<small>, or something else) with nothing more than the
.form-text class.
Password
Must be 8-20 characters long.
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Password</label>
</div>
<div class="col-auto">
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
</div>
<div class="col-auto">
<span id="passwordHelpInline" class="form-text">
Must be 8-20 characters long.
</span>
</div>
</div>
<div class="row g-3 align-items-center"> <div class="col-auto">
<label for="inputPassword6"
class="col-form-label">Password</label> </div> <div
class="col-auto"> <input type="password" id="inputPassword6"
class="form-control" aria-describedby="passwordHelpInline"> </div>
<div class="col-auto"> <span id="passwordHelpInline"
class="form-text"> Must be 8-20 characters long. </span> </div>
</div>
Disabled
Add the disabled boolean attribute on an input to give it a grayed out appearance, remove
pointer events, and prevent focusing.
<input class="form-control mb-2" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>
<input class="form-control mb-2" type="text" placeholder="Disabled
input" aria-label="Disabled input example" disabled> <input
class="form-control" type="text" value="Disabled readonly input"
aria-label="Disabled input example" disabled readonly>
Readonly
Add the readonly boolean attribute on an input to prevent modification of the input’s
value. readonly inputs can still be focused and selected, while
disabled inputs cannot.
<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>
<input class="form-control" type="text" value="Readonly input
here..." aria-label="readonly input example" readonly>
Readonly plain text
If you want to have <input readonly> elements in your form styled as plain text,
replace .form-control with .form-control-plaintext to remove the default
form field styling and preserve the correct margin and padding.
<div class="mb-3 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="mb-3 row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<div class="mb-3 row"> <label for="staticEmail"
class="col-sm-2 col-form-label">Email</label> <div
class="col-sm-10"> <input type="text" readonly
class="form-control-plaintext" id="staticEmail"
value="email@example.com"> </div> </div> <div class="mb-3
row"> <label for="inputPassword" class="col-sm-2
col-form-label">Password</label> <div class="col-sm-10"> <input
type="password" class="form-control" id="inputPassword">
</div> </div>
<form class="row g-3">
<div class="col-auto">
<label for="staticEmail2" class="visually-hidden">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
</div>
<div class="col-auto">
<label for="inputPassword2" class="visually-hidden">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
</div>
</form>
<form class="row g-3"> <div class="col-auto"> <label
for="staticEmail2" class="visually-hidden">Email</label> <input
type="text" readonly class="form-control-plaintext"
id="staticEmail2" value="email@example.com"> </div> <div
class="col-auto"> <label for="inputPassword2"
class="visually-hidden">Password</label> <input type="password"
class="form-control" id="inputPassword2"
placeholder="Password"> </div> <div class="col-auto">
<button type="submit" class="btn btn-primary mb-3">Confirm
identity</button> </div> </form>
<div class="mb-3">
<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
<label for="formFileMultiple" class="form-label">Multiple files input example</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
<label for="formFileDisabled" class="form-label">Disabled file input example</label>
<input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
<label for="formFileXs" class="form-label">Extra small file input example</label>
<input class="form-control form-control-xs" id="formFileXs" type="file">
</div>
<div class="mb-3">
<label for="formFileSm" class="form-label">Small file input example</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div class="mb-3">
<label for="formFileLg" class="form-label">Large file input example</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>
<div>
<label for="formFileXl" class="form-label">Extra large file input example</label>
<input class="form-control form-control-xl" id="formFileXl" type="file">
</div>
<div class="mb-3"> <label for="formFile"
class="form-label">Default file input example</label> <input
class="form-control" type="file" id="formFile"> </div>
<div class="mb-3"> <label for="formFileMultiple"
class="form-label">Multiple files input example</label> <input
class="form-control" type="file" id="formFileMultiple"
multiple> </div> <div class="mb-3"> <label
for="formFileDisabled" class="form-label">Disabled file input
example</label> <input class="form-control" type="file"
id="formFileDisabled" disabled> </div> <div class="mb-3">
<label for="formFileXs" class="form-label">Extra small file input
example</label> <input class="form-control form-control-xs"
id="formFileXs" type="file"> </div> <div
class="mb-3"> <label for="formFileSm"
class="form-label">Small file input example</label> <input
class="form-control form-control-sm" id="formFileSm"
type="file"> </div> <div class="mb-3"> <label
for="formFileLg" class="form-label">Large file input
example</label> <input class="form-control form-control-lg"
id="formFileLg" type="file"> </div> <div> <label
for="formFileXl" class="form-label">Extra large file input
example</label> <input class="form-control form-control-xl"
id="formFileXl" type="file"> </div>
Color
Set the type="color" and add .form-control-color to the
<input>. We use the modifier class to set fixed heights and override
some inconsistencies between browsers.
<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#ff00ff" title="Choose your color">
<label for="exampleColorInput" class="form-label">Color
picker</label> <input type="color" class="form-control
form-control-color" id="exampleColorInput" value="#ff00ff"
title="Choose your color">
Color input with text
A styled color input component that displays the selected hex value beside the color picker. Use the
.color-input-with-text wrapper to enable this feature, along with
.form-control-color for the color input and .form-control-color-value for
the read-only hex display. Ideal for forms or interfaces where users need both a visual and precise
hex color reference.
<div class="color-input-with-text">
<input type="color" class="form-control form-control-color" id="colorInputWithText" value="#ff00ff" title="Choose your color" />
<input type="text" class="form-control-color-value" value="#ff00ff" readonly />
</div>
<div class="color-input-with-text"> <input type="color"
class="form-control form-control-color" id="colorInputWithText"
value="#ff00ff" title="Choose your color" /> <input
type="text" class="form-control-color-value" value="#ff00ff"
readonly /> </div>
Datalists
Datalists allow you to create a group of <option>s that can be accessed (and
autocompleted) from within an <input>. These are similar to
<select> elements, but come with more menu styling limitations and differences.
While most browsers and operating systems include some support for
<datalist> elements, their styling is inconsistent at best.
Learn more about support for datalist elements .
<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
<label for="exampleDataList" class="form-label">Datalist
example</label> <input class="form-control" list="datalistOptions"
id="exampleDataList" placeholder="Type to search..."> <datalist
id="datalistOptions"> <option value="San Francisco"> <option
value="New York"> <option value="Seattle"> <option
value="Los Angeles"> <option value="Chicago"> </datalist>