Bootstrap Forms

Bootstrap’s Form Styling

Bootstrap 5 significantly reboots form styling for a more consistent look and feel, better customization, and improved accessibility. Form controls automatically receive some global styling.

Key classes include .form-control for textual inputs (<input>, <textarea>, <select>), .form-select for custom select menus, and .form-check for checkboxes and radios. These generally have a width of 100% by default within their parent container.

Bootstrap Form Layouts

Bootstrap 5 offers flexible ways to lay out forms, primarily using its grid system and utility classes. Common layouts include:

Default (stacked) form
Horizontal form (labels and controls on the same line)
Inline form (multiple controls on a single line, compact)

General guidelines for Bootstrap forms:

Wrap labels and form controls in a <div> (often with margin utilities like mb-3) for proper spacing. The older .form-group class is no longer used.
Use <label> elements associated with their controls (via the for attribute matching the control’s id). This is crucial for accessibility.
Add class .form-control to all textual <input>, <textarea> elements. Use .form-select for <select> elements.
Structure checkboxes and radio buttons using the .form-check, .form-check-input, and .form-check-label classes.

Bootstrap Default (Stacked) Form

This is the most basic form layout where labels appear above their respective input fields.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stacked Form Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
  <form>
    <div class="mb-3">
      <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>
    </div>
    <div class="mb-3">
      <label for="exampleInputPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="mb-3 form-check">
      <input type="checkbox" class="form-check-input" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Notice the use of mb-3 for spacing between form groups and the new structure for checkboxes with .form-check, .form-check-input, and .form-check-label.

Bootstrap Inline Form (using Grid/Flex)

To create forms where elements are on a single horizontal line, Bootstrap 5 encourages using its grid system (specifically row columns or col-auto) or flexbox utilities. The .form-inline class from previous Bootstrap versions has been removed.

Here’s an example using grid’s col-auto for an inline layout:

<!DOCTYPE html>
<html lang="en">
<body>
<div class="container mt-3">
  <form class="row gx-3 gy-2 align-items-center">
    <div class="col-auto">
      <label class="visually-hidden" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-text">@</div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </form>
</div>
<!-- Requires Bootstrap CSS and JS -->
</body>
</html>

Key elements:

The <form> uses .row and gutter classes like gx-3 (horizontal gutter) and gy-2 (vertical gutter for when items wrap).
.col-auto makes columns only as wide as their content.
.visually-hidden is used to hide labels visually while keeping them accessible to screen readers (replaces .sr-only).

Bootstrap Horizontal Form (using Grid)

Horizontal forms, where labels are aligned to the left of their controls on the same line, are built using Bootstrap’s grid system. The .form-horizontal class is no longer used.

Wrap label/control pairs in a .row (often with mb-3 for spacing). Assign grid column classes (e.g., .col-sm-2, .col-sm-10) to the <label> and the <div> wrapping the control. Use .col-form-label on labels for proper vertical alignment with form controls.

<!DOCTYPE html>
<html lang="en">
<body>
<div class="container mt-3">
  <form>
    <div class="row mb-3">
      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3">
      </div>
    </div>
    <div class="row mb-3">
      <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3">
      </div>
    </div>
    <fieldset class="row mb-3">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <!-- Add more radios or checkboxes as needed -->
      </div>
    </fieldset>
    <div class="row mb-3">
      <div class="col-sm-10 offset-sm-2">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="gridCheck1">
          <label class="form-check-label" for="gridCheck1">
            Example checkbox
          </label>
        </div>
      </div>
    </div>
    <div class="row">
        <div class="col-sm-10 offset-sm-2">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </div>
  </form>
</div>
<!-- Requires Bootstrap CSS and JS -->
</body>
</html>

The .offset-sm-2 class pushes the checkbox and button group to align with the input fields, effectively skipping the label column width.

Other important form features in Bootstrap 5 not covered in depth here include: Floating labels, Input groups, Validation styles, and more advanced Select menus. Refer to the official Bootstrap documentation for these.