Bootstrap Forms

Bootstrap styles the form fields so they look the same in all browsers. Add the classes to the normal HTML form elements. In Bootstrap 5, the old .form-group is removed. Use margin classes like mb-3 instead.

Text inputs, textarea and labels

<form>
  <div class="mb-3">
    <label for="email1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email1" placeholder="name@example.com">
    <div class="form-text">We will never share your email.</div>
  </div>
  <div class="mb-3">
    <label for="msg1" class="form-label">Message</label>
    <textarea class="form-control" id="msg1" rows="3"></textarea>
  </div>
</form>

• .form-control styles inputs, textareas and the file input.
• .form-label is for the label, and .form-text for the help text.
• Always connect the label with the field: for of the label = id of the field.

Select

<select class="form-select" aria-label="Choose a course">
  <option selected>Choose a course</option>
  <option value="1">HTML</option>
  <option value="2">CSS</option>
  <option value="3">Bootstrap</option>
</select>

The class .form-select replaces .custom-select of Bootstrap 4.

Checkboxes, radio buttons and switches

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="check1" checked>
  <label class="form-check-label" for="check1">Checked checkbox</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" id="radio1" checked>
  <label class="form-check-label" for="radio1">Free plan</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" id="radio2">
  <label class="form-check-label" for="radio2">Pro plan</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="switch1">
  <label class="form-check-label" for="switch1">Switch</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inl1">
  <label class="form-check-label" for="inl1">Inline 1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inl2">
  <label class="form-check-label" for="inl2">Inline 2</label>
</div>

Range, file and color

<label for="range1" class="form-label">Range</label>
<input type="range" class="form-range mb-3" id="range1">
<label for="file1" class="form-label">File input</label>
<input class="form-control mb-3" type="file" id="file1">
<label for="color1" class="form-label">Color</label>
<input type="color" class="form-control form-control-color" id="color1" value="#563d7c">

Sizes, disabled and readonly

<input class="form-control form-control-lg mb-2" type="text" placeholder="Large input">
<input class="form-control mb-2" type="text" placeholder="Default input">
<input class="form-control form-control-sm mb-2" type="text" placeholder="Small input">
<input class="form-control mb-2" type="text" value="Disabled input" disabled>
<input class="form-control mb-2" type="text" value="Readonly input" readonly>
<input class="form-control-plaintext" type="text" value="Plain text (readonly)" readonly>

Layout with the grid

Use the grid classes to put fields in one row, and g-3 for the spacing.

<form class="row g-3">
  <div class="col-md-6">
    <label for="fn" class="form-label">First name</label>
    <input type="text" class="form-control" id="fn">
  </div>
  <div class="col-md-6">
    <label for="ln" class="form-label">Last name</label>
    <input type="text" class="form-control" id="ln">
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign up</button>
  </div>
</form>

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.