Bootstrap Forms

Examplehtml

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container my-3">
  <form class="row g-3" onsubmit="return false">
    <div class="col-md-6">
      <label for="email" class="form-label">Email</label>
      <input type="email" class="form-control" id="email" placeholder="name@example.com">
    </div>
    <div class="col-md-6">
      <label for="pw" class="form-label">Password</label>
      <input type="password" class="form-control" id="pw">
    </div>
    <div class="col-md-8">
      <label for="city" class="form-label">City</label>
      <select id="city" class="form-select"><option>London</option><option>Paris</option></select>
    </div>
    <div class="col-md-4 d-flex align-items-end">
      <div class="form-check"><input class="form-check-input" type="checkbox" id="ok"><label class="form-check-label" for="ok">Remember me</label></div>
    </div>
    <div class="col-12"><button class="btn btn-primary">Sign in</button></div>
  </form>
</div>

Open in editor »

Form controls use .form-control, .form-select and .form-check-input, with .form-label for labels. Grid classes arrange them.

Quick check

Which class styles a text input?

.form-control.input.text-field

Finish the quick check (and any code exercise) to complete this lesson, or mark it done yourself.

Tip: use the left and right arrow keys to move between lessons.