Give textual form controls like <input>
s and <textarea>
s an
upgrade with custom styles, sizing, focus states, and more.
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input
type="email"
class="form-control"
id="exampleFormControlInput1"
placeholder="[email protected]"
/>
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label"
>Example textarea</label
>
<textarea
class="form-control"
id="exampleFormControlTextarea1"
rows="3"
></textarea>
</div>
Set heights using classes like .form-control-lg
and .form-control-sm
.
<input
class="form-control form-control-lg my-2"
type="text"
placeholder=".form-control-lg"
aria-label=".form-control-lg example"
/>
<input
class="form-control my-2"
type="text"
placeholder="Default input"
aria-label="default input example"
/>
<input
class="form-control form-control-sm my-2"
type="text"
placeholder=".form-control-sm"
aria-label=".form-control-sm example"
/>
Add the disabled
boolean attribute on an input to give it a grayed out appearance and
remove pointer events.
Add the readonly
boolean attribute on an input to prevent modification of the input’s
value.
<input
class="form-control my-2"
type="text"
placeholder="Disabled input"
aria-label="Disabled input example"
disabled
/>
<input
class="form-control my-2"
type="text"
value="Readonly input here..."
aria-label="readonly input example"
readonly
/>
<input
class="form-control my-2"
type="text"
value="Disabled readonly input"
aria-label="Disabled input example"
disabled
readonly
/>
If you want to have <input readonly>
elements in your form styled as plain
text, use the .form-control-plaintext
class to remove the default form field styling
and preserve the correct margin and padding.
<h5>Vertical</h5>
<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 protected]"
/>
</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>
<h5>Horizontal</h5>
<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 protected]"
/>
</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>
<label for="exampleColorInput" class="form-label">Color picker</label>
<input
type="color"
class="form-control form-control-color"
id="exampleColorInput"
value="#563d7c"
title="Choose your color"
/>
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.
<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>
<option value="New York"></option>
<option value="Seattle"></option>
<option value="Los Angeles"></option>
<option value="Chicago"></option>
</datalist>
<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="formFileSm" class="form-label">Small file input example</label>
<input class="form-control form-control-sm" id="formFileSm" type="file" />
</div>
<div>
<label for="formFileLg" class="form-label">Large file input example</label>
<input class="form-control form-control-lg" id="formFileLg" type="file" />
</div>