Bootstrap Form Controls

Give textual form controls like <input> and <textarea> elements an instant, massive upgrade simply by applying the .form-control utility class. This single class standardizes borders, padding, sizing, responsive widths, and focus outlines across all major web browsers effortlessly.

---

Basic Text & Textarea

Apply .form-control to standard text inputs. When applied to a <textarea> element, you can manually control how tall the box is utilizing the native HTML rows attribute.

<!-- Standard HTML Input -->
<div class="mb-3">
    <label for="email" class="form-label">Email Address</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
</div>

<!-- Standard HTML Textarea with 'rows' attribute -->
<div class="mb-3">
    <label for="textarea" class="form-label">Message</label>
    <textarea class="form-control" id="textarea" rows="4"></textarea>
</div>

---

Sizing Controls

Bootstrap includes explicit modifier classes to rapidly scale elements, bypassing custom CSS. Set exact heights utilizing classes like .form-control-lg (for large, dominant inputs) and .form-control-sm (for compact, tighter forms).

<!-- Large Input -->
<input class="form-control form-control-lg" type="text" placeholder="Large input">

<!-- Default Input -->
<input class="form-control" type="text" placeholder="Default input">

<!-- Small Input -->
<input class="form-control form-control-sm" type="text" placeholder="Small input">

---

Readonly Plain Text

If you explicitly want an input to be un-editable, but you also want to remove its bordering so it looks like standard text (while preserving the padding so it flawlessly aligns with surrounding form controls), utilize the .form-control-plaintext class combined with the readonly attribute!

<!-- Uses .form-control-plaintext and readonly -->
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="user@example.com">

---

File Upload Input

Historically, file inputs were extremely difficult to standardize structurally across browsers. Bootstrap universally fixes this. Just apply the standard .form-control class identically to how you do text inputs on an <input type="file"> form!

<!-- Single File Selection -->
<div class="mb-3">
    <label for="formFile" class="form-label">Default file input example</label>
    <input class="form-control" type="file" id="formFile">
</div>

<!-- Multiple Files Selection (added 'multiple' attribute) -->
<div class="mb-3">
    <label for="multiple" class="form-label">Multiple files input example</label>
    <input class="form-control" type="file" id="multiple" multiple>
</div>

---

Color Picker

To explicitly launch the native operative system color picker dropdown, configure an input to type="color", attach the .form-control class, and definitively pair it with the specific .form-control-color modifier class.

<!-- Color input requires dual classes: .form-control .form-control-color -->
<input type="color" class="form-control form-control-color" id="colorInput" value="#198754" title="Choose your color">

---

Datalists

Datalists gracefully allow you to create a customized set of searchable options that appear underneath an interactive text input like a smart dropdown search! Simply bind an <input> field utilizing a list="..." attribute targeting the ID representing your <datalist> component.

<!-- The list="" attribute explicitly connects to the datalist ID -->
<input class="form-control" list="datalistOptions" id="citySearch" placeholder="Type to search...">

<!-- The Datalist defines the searchable dropdown items -->
<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>