Bootstrap Forms Overview

Bootstrap 5 provides a massively reimagined suite of classes that drastically simplify the layout, styling, and general interactivity of standard HTML <form> elements. By adding a few targeted classes, your forms become completely responsive, highly accessible, and visually stunning.

Basic Form Structure

To establish a clean, vertically stacked form, apply margin-bottom utilities like .mb-3 to standard <div> wrappers pushing elements apart evenly.

• Use .form-label on your <label> elements to apply appropriate bottom margins.
• Use .form-control on textual <input> elements to style their borders, padding, and focus outlines brilliantly.
• Use .form-text beneath inputs to add subtle, small-text help blocks (such as password requirements or privacy notices).

<form>
    <div class="mb-3">
        <label for="emailInput" class="form-label">Email address</label>
        <input type="email" class="form-control" id="emailInput">
        <div class="form-text">We'll never share your email.</div>
    </div>
    
    <div class="mb-3">
        <label for="passInput" class="form-label">Password</label>
        <input type="password" class="form-control" id="passInput">
    </div>
    
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Form Layout (Grids)

For more complex layouts requiring columns, Bootstrap seamlessly incorporates its legendary grid system directly into forms. By wrapping inputs inside a row (`.row`) accompanied by column classes (like `.col-md-6`), you can easily pack multiple fields onto a single horizontal line.

Using gutter spacing classes (like .g-3) on the parent `.row` guarantees that grid items retain comfortable margins separating them both vertically and horizontally across varying screen limits.

<form class="row g-3">
    <!-- Side by side on medium screens -->
    <div class="col-md-6">
        <label for="firstName" class="form-label">First Name</label>
        <input type="text" class="form-control" id="firstName">
    </div>
    <div class="col-md-6">
        <label for="lastName" class="form-label">Last Name</label>
        <input type="text" class="form-control" id="lastName">
    </div>
    
    <!-- Full width on all screens -->
    <div class="col-12">
        <label for="address" class="form-label">Address</label>
        <input type="text" class="form-control" id="address">
    </div>
</form>

Disabled & Readonly states

Add the standard HTML boolean attribute disabled to immediately alter the background color, border, and interaction behavior (blocking clicks and pointer events). Alternatively, you can utilize the readonly attribute if you wish to block user typing but still submit the value alongside the form payload and permit pointer selection interactions.

<!-- Standard Disabled Field -->
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>

<!-- Readonly Field -->
<input class="form-control" type="text" value="Readonly input" aria-label="readonly input example" readonly>

<!-- Optionally wrap a large form block in a fieldset to disable it entirely! -->
<fieldset disabled>
    <input class="form-control" ...>
    <button class="btn btn-primary" ...>
</fieldset>