What Is Bootstrap Form Design?

Forms allow users to enter and submit information. You’ll find them in registration pages, contact forms, login screens, surveys, and checkout experiences.

Bootstrap makes form controls visually consistent and responsive without requiring you to write all the CSS yourself.

Create Your First Bootstrap Input

Bootstrap’s form-control class styles text inputs, email fields, passwords, and other common controls.

<div class="mb-3">
  <label for="studentName" class="form-label">
    Full Name
  </label>
  <input type="text"
    class="form-control"
    id="studentName"
    name="studentName"
    placeholder="Enter your name"
    required>
</div>

The label’s for value should match the input’s id. This helps users understand which label belongs to which field.

Choose the Right Input Type

Different input types help browsers provide suitable keyboards and validation behavior.

<input type="text" class="form-control">
<input type="email" class="form-control">
<input type="password" class="form-control">
<input type="number" class="form-control">
<input type="date" class="form-control">

Create a Dropdown Selection

Use form-select to style a native HTML select menu.

<label for="course" class="form-label">
  Choose a Course
</label>

<select id="course" name="course"
  class="form-select" required>
  <option value="" selected disabled>
    Select a course
  </option>
  <option value="html">HTML & CSS</option>
  <option value="bootstrap">Bootstrap</option>
  <option value="javascript">JavaScript</option>
</select>

The empty first option encourages users to make a deliberate selection rather than accepting an accidental default.

Collect Longer Responses

Use a <textarea> when users need to enter multiple lines of text, such as comments or questions.

<label for="message" class="form-label">
  Additional Comments
</label>

<textarea id="message" name="message"
  class="form-control"
  rows="4"
  placeholder="Write your message..."></textarea>

The rows attribute controls the initial visible height of the text area.

Offer Clear Choices

Use checkboxes for independent yes/no choices, and radio buttons when users must choose one option from a group.

<div class="form-check">
  <input class="form-check-input"
    type="checkbox" id="updates">
  <label class="form-check-label" for="updates">
    Send me course updates
  </label>
</div>

<div class="form-check">
  <input class="form-check-input"
    type="radio" name="schedule"
    id="day" value="day">
  <label class="form-check-label" for="day">
    Day Classes
  </label>
</div>

<div class="form-check">
  <input class="form-check-input"
    type="radio" name="schedule"
    id="evening" value="evening">
  <label class="form-check-label" for="evening">
    Evening Classes
  </label>
</div>

Arrange Form Fields in Columns

Bootstrap’s grid system lets you display fields side by side on larger screens while stacking them on mobile.

<div class="row g-3">
  <div class="col-12 col-md-6">
    <label for="first" class="form-label">
      First Name
    </label>
    <input id="first" class="form-control">
  </div>

  <div class="col-12 col-md-6">
    <label for="last" class="form-label">
      Last Name
    </label>
    <input id="last" class="form-control">
  </div>
</div>

col-12 uses the full width on small screens, while col-md-6 uses half the row at the medium breakpoint and above.

Help Users Correct Mistakes

Bootstrap provides is-valid, is-invalid, valid-feedback, and invalid-feedback classes for visual validation messages.

<div class="mb-3">
  <label for="email" class="form-label">
    Email Address
  </label>
  <input type="email"
    class="form-control"
    id="email"
    required>
  <div class="invalid-feedback">
    Please enter a valid email address.
  </div>
</div>

For browser-assisted Bootstrap validation, add needs-validation to the form and apply was-validated when the user attempts to submit.

const form = document.querySelector('form');

form.addEventListener('submit', event => {
  if (!form.checkValidity()) {
    event.preventDefault();
  }
  form.classList.add('was-validated');
});

Finish Your Form with a Submit Button

A button with type="submit" triggers the form’s submission process. Bootstrap’s btn and btn-primary classes provide its appearance.

<button type="submit" class="btn btn-primary">
  Register Now
</button>

In the Sandbox, successful submission displays a confirmation inside the preview. It does not send the information to a server.