bootstrap_ref_css_forms

Bootstrap 5 CSS Forms Reference

Bootstrap’s Default Form Styling

Individual form controls in Bootstrap 5 receive some global styling automatically, aiming for a consistent look and feel across browsers and devices.

All textual , , and <select> elements with the class “.form-control” are set to width: 100% by default, making them stack neatly within their parent containers.

Key considerations for Bootstrap 5 forms:

• While not strictly required by Bootstrap for styling, adding role="form" to the
  element can improve accessibility for users relying on screen readers.
• Wrap labels and form controls in a
  , typically with a margin utility class like mb-3 (margin-bottom 3) for optimal spacing. The older .form-group class is no longer used for this purpose.
• Add class .form-control to all textual , , and <select> elements for Bootstrap’s default styling.

The following example demonstrates a simple Bootstrap 5 form with two input fields, a checkbox, and a submit button:

<form>
  <div class="mb-3">
    <label for="emailInput" class="form-label">Email address:</label>
    <input type="email" class="form-control" id="emailInput" 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="passwordInput" class="form-label">Password:</label>
    <input type="password" class="form-control" id="passwordInput">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="rememberMeCheck">
    <label class="form-check-label" for="rememberMeCheck">Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<!--
  Practical Application: This structure is ideal for login forms, contact forms, or any simple data entry.
  Common Obstacle: Achieving correct spacing between form elements. Bootstrap 5's margin utilities (like mb-3) solve this.
  Further Reading: See Bootstrap 5 documentation on Forms for more advanced layouts and components: https://getbootstrap.com/docs/5.3/forms/overview/
-->

Form Layout Classes and Techniques

Bootstrap 5 offers flexible ways to structure your forms. Here are some common layout approaches:

Class/Technique
Description
Example


**Inline Forms (Using Flexbox or Grid)**
Create forms where elements are laid out horizontally. This is achieved using Bootstrap's flexbox utilities (e.g., `d-flex`, `align-items-center`, `me-2`) or the grid system (`row`, `col`). This replaces the older `.form-inline` class.

*Flexbox Example:*
```html
<form class="d-flex align-items-center">
  <label for="inlineName" class="visually-hidden">Name</label>
  <input type="text" class="form-control me-2" id="inlineName" placeholder="Jane Doe">
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Grid Example (for more complex inline forms):

<form class="row gx-3 gy-2 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Horizontal Forms (Using Grid) Align labels and form controls side-by-side. This is achieved using Bootstrap’s grid system (.row, .col-*, .col-form-label). This replaces the older .form-horizontal class.

Example:

<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>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>