Bootstrap Forms

Bootstrap makes form fields look the same in every browser, with clear labels, good spacing and helpful states.

Text Inputs

Give each input the class form-control and each label the class form-label. Wrap each pair in a <div class="mb-3"> for space below it.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container my-4" style="max-width: 480px;">
  <h3 class="mb-3">Admission Form</h3>
  <form>
    <div class="mb-3">
      <label for="fullName" class="form-label">Full name</label>
      <input type="text" class="form-control" id="fullName" placeholder="Ayesha Khan">
    </div>
    <div class="mb-3">
      <label for="phone" class="form-label">Mobile number</label>
      <input type="tel" class="form-control" id="phone" placeholder="03XX-XXXXXXX">
      <div class="form-text">We will send class timings by SMS.</div>
    </div>
    <div class="mb-3">
      <label for="address" class="form-label">Address</label>
      <textarea class="form-control" id="address" rows="2"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

</body>
</html>

Try it Yourself »

The for of each label matches the id of its input. Clicking the label then puts the cursor in the input, and screen readers know which label belongs to which field.

Form Classes

Class	Used on
`form-label`	`<label>` above an input
`form-control`	Text inputs and `<textarea>`
`form-select`	`<select>` dropdowns
`form-check`	A wrapper around a checkbox or radio
`form-check-input`, `form-check-label`	The checkbox or radio and its label
`form-text`	Small help text under a field
`form-control-lg`, `form-control-sm`	Bigger or smaller inputs

Selects, Checkboxes and Radios

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<form class="container my-4" style="max-width: 480px;">
  <div class="mb-3">
    <label for="course" class="form-label">Course</label>
    <select class="form-select" id="course">
      <option selected>Choose a course</option>
      <option>Web Development</option>
      <option>Graphic Design</option>
      <option>Python</option>
    </select>
  </div>

  <p class="mb-1">Class timing</p>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="timing" id="morning" checked>
    <label class="form-check-label" for="morning">Morning</label>
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" type="radio" name="timing" id="evening">
    <label class="form-check-label" for="evening">Evening</label>
  </div>

  <div class="form-check form-switch mb-3">
    <input class="form-check-input" type="checkbox" role="switch" id="laptop">
    <label class="form-check-label" for="laptop">I have my own laptop</label>
  </div>

  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="agree">
    <label class="form-check-label" for="agree">I agree to the institute rules</label>
  </div>

  <button type="submit" class="btn btn-success w-100">Register</button>
</form>

</body>
</html>

Try it Yourself »

Radio buttons with the same name belong to one group, so only one can be chosen. form-switch turns a checkbox into a toggle switch.

Form Layout with the Grid

Use row and columns to put fields side by side on bigger screens:

Example

html

<form class="row g-3">
  <div class="col-md-6">
    <label for="city" class="form-label">City</label>
    <input type="text" class="form-control" id="city">
  </div>
  <div class="col-md-6">
    <label for="area" class="form-label">Area</label>
    <input type="text" class="form-control" id="area">
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Save</button>
  </div>
</form>

Validation Styles

Add is-valid or is-invalid to a field to show a green or red border. A following valid-feedback or invalid-feedback message then becomes visible.

Example

html

<input type="email" class="form-control is-invalid" id="email" value="ali@">
<div class="invalid-feedback">Please enter a full email address.</div>

Bootstrap only changes how fields look. To really check the data, use HTML attributes like required and type="email", and always check it again on the server.

Exercise

Which class should you put on a <select> dropdown in Bootstrap 5?

form-controlform-selectform-dropdownselect-control