Learn with us

Bootstrap 5 provides a comprehensive set of CSS classes and components to style and enhance forms. Here’s an overview of how to create forms using Bootstrap 5:

1. Form Structure:
   Wrap your form elements inside a <form> element and use the form class to apply Bootstrap’s form styling.

<form class="form">
  <!-- Form elements go here -->
</form>

2. Form Controls:
   Use Bootstrap’s form control classes to style input fields, checkboxes, radio buttons, selects, and text areas.

<input type="text" class="form-control" placeholder="Enter your name">
<input type="email" class="form-control" placeholder="Enter your email">
<textarea class="form-control" rows="4" placeholder="Enter your message"></textarea>
<select class="form-select">
  <option selected>Select an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

3. Form Layout:
   You can use Bootstrap’s grid system to create form layouts with multiple columns. Use the row and col-* classes to structure your form elements within grid columns.

<div class="row">
  <div class="col-md-6">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name">
  </div>
  <div class="col-md-6">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email">
  </div>
</div>

4. Form Validation:
   Bootstrap 5 provides built-in form validation classes to indicate valid and invalid form controls. Add the is-valid or is-invalid classes to your form controls based on their validation status.

<input type="text" class="form-control is-valid" placeholder="Valid input">
<input type="text" class="form-control is-invalid" placeholder="Invalid input">

5. Form Buttons:
   Use Bootstrap’s button classes to style your form buttons. You can use the btn class along with contextual classes such as btn-primary, btn-secondary, etc., to define button styles.

<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-secondary">Reset</button>

These are just some of the basic features and elements that Bootstrap 5 provides for forms. Bootstrap also offers additional components like form groups, input groups, checkboxes, radio buttons, file inputs, and more, which you can explore in the official Bootstrap documentation to enhance your forms further.

Remember to include the necessary Bootstrap 5 CSS and JavaScript files in your project to utilize the form styling and functionality provided by Bootstrap.