Bootstrap 5 Forms

Forms are an essential part of any website, enabling user interaction such as signing up, logging in, or submitting feedback. Bootstrap 5 provides a powerful and flexible set of form utilities that make it easier to create responsive, consistent, and aesthetically pleasing forms.

In this guide, we’ll explore the features of Bootstrap 5 forms with practical examples, ensuring you have everything you need to build functional forms for your website or applications.

Key Features of Bootstrap 5 Forms

  1. Responsive Layouts: Use grid and column utilities to make forms adaptable to all screen sizes.
  2. Customizable Inputs: Enhanced styling for input types like text, password, select, checkbox, radio, and more.
  3. Validation Utilities: Built-in validation styles for a polished user experience.
  4. Form Controls: Pre-styled elements for text input, buttons, checkboxes, and other controls.

Basic Bootstrap 5 Form Example

Here’s a simple form using the basic classes:

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="[email protected]">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Enter your password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Form Layouts

1. Vertical Forms

By default, Bootstrap forms stack inputs vertically. You can add spacing between elements using utilities like mb-3.

Example:

<form>
  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name">
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email">
  </div>
  <button type="submit" class="btn btn-success">Submit</button>
</form>

2. Horizontal Forms

To create horizontal forms, use the Bootstrap grid system along with form-control classes.

Example:

<form>
  <div class="row mb-3">
    <label for="username" class="col-sm-2 col-form-label">Username</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="username">
    </div>
  </div>
  <div class="row mb-3">
    <label for="password" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password">
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

3. Inline Forms

For compact forms displayed inline, use the form-inline class.

Example:

<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>

Form Controls

1. Input Fields

Bootstrap enhances all types of input fields, including text, email, password, number, and more.

Example:

<div class="mb-3">
  <label for="phone" class="form-label">Phone Number</label>
  <input type="tel" class="form-control" id="phone">
</div>

2. Select Dropdowns

Bootstrap provides enhanced styling for dropdowns.

Example:

<div class="mb-3">
  <label for="country" class="form-label">Country</label>
  <select class="form-select" id="country">
    <option selected>Choose...</option>
    <option value="1">United States</option>
    <option value="2">Canada</option>
    <option value="3">Australia</option>
  </select>
</div>

3. Checkboxes and Radios

Style checkboxes and radio buttons with classes like form-check.

Example:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

4. Range Sliders

Bootstrap supports range sliders with custom styling.

Example:

<div class="mb-3">
  <label for="customRange1" class="form-label">Example Range</label>
  <input type="range" class="form-range" id="customRange1">
</div>

Form Validation

Bootstrap 5 includes built-in validation styles to display feedback on user inputs.

Validation Example:

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">Please provide a valid email.</div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

Responsive Forms with Bootstrap Grid

Use the Bootstrap grid system to make forms responsive and well-structured.

Example:

<form>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="firstName" class="form-label">First Name</label>
      <input type="text" class="form-control" id="firstName">
    </div>
    <div class="col-md-6 mb-3">
      <label for="lastName" class="form-label">Last Name</label>
      <input type="text" class="form-control" id="lastName">
    </div>
  </div>
  <button class="btn btn-success" type="submit">Submit</button>
</form>

FAQs About Bootstrap 5 Forms

1. Can I use custom styles with Bootstrap forms?

Yes, you can apply custom CSS styles or modify existing styles using Sass variables.

2. How do I make forms responsive?

Leverage the Bootstrap grid system (row, col-, and breakpoints) for responsive forms.

3. Does Bootstrap 5 support floating labels?

Yes, Bootstrap supports floating labels with form-floating class.

Floating Label Example:

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>

Conclusion

Bootstrap 5 forms simplify the process of building modern, responsive, and user-friendly forms. From basic input fields to advanced validation, the framework equips developers with everything needed for seamless form design.

Leave a Comment