Bootstrap Forms

Create a login form with Bootstrap

Description: Create a login form with an email, a password, a “Remember me” checkbox and a full width Login button, centered in a card.

Hint:

• Use form-label, form-control, form-check and d-grid.

Solution

<div class="container">
  <div class="row justify-content-center">
    <div class="col-12 col-sm-10 col-md-8">
      <div class="card shadow-sm">
        <div class="card-body p-4">
          <h2 class="h4 mb-3 text-center">Login</h2>
          <form>
            <div class="mb-3">
              <label for="lemail" class="form-label">Email address</label>
              <input type="email" class="form-control" id="lemail" placeholder="name@example.com">
            </div>
            <div class="mb-3">
              <label for="lpass" class="form-label">Password</label>
              <input type="password" class="form-control" id="lpass">
            </div>
            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox" id="lremember">
              <label class="form-check-label" for="lremember">Remember me</label>
            </div>
            <div class="d-grid"><button type="submit" class="btn btn-primary">Login</button></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

How it works

• justify-content-center on the row centers the column.
• d-grid makes the button full width.

Read Forms.

Create a registration form with two columns

Description: Make a registration form. First name and last name must be in one row, email and city in another row, and the address field must be full width.

Hint:

• Use the grid inside the form: row g-3 and col-md-6.

Solution

<form class="row g-3">
  <div class="col-md-6">
    <label for="rfn" class="form-label">First name</label>
    <input type="text" class="form-control" id="rfn">
  </div>
  <div class="col-md-6">
    <label for="rln" class="form-label">Last name</label>
    <input type="text" class="form-control" id="rln">
  </div>
  <div class="col-md-8">
    <label for="rem" class="form-label">Email</label>
    <input type="email" class="form-control" id="rem">
  </div>
  <div class="col-md-4">
    <label for="rcity" class="form-label">City</label>
    <select id="rcity" class="form-select"><option selected>Choose...</option><option>Delhi</option><option>Pune</option></select>
  </div>
  <div class="col-12">
    <label for="radd" class="form-label">Address</label>
    <input type="text" class="form-control" id="radd" placeholder="Street and number">
  </div>
  <div class="col-12"><button type="submit" class="btn btn-primary">Register</button></div>
</form>

How it works

• row g-3 on the form creates the grid with a gutter. Each field is a column.
• col-md-6 puts two fields side by side from 768px, and they are stacked on a phone.

Read Forms.

Validate a required field with Bootstrap

Description: Create a form with a required name field. When the user submits it empty, the field must be red with the message “Please write your name”.

Hint:

• Use novalidate, .needs-validation, .invalid-feedback, checkValidity() and the class was-validated.

Solution

<form class="needs-validation" novalidate id="f">
  <label for="vn" class="form-label">Name</label>
  <input type="text" class="form-control" id="vn" required>
  <div class="invalid-feedback">Please write your name.</div>
  <button class="btn btn-primary mt-3" type="submit">Submit</button>
</form>
<script>
  document.getElementById('f').addEventListener('submit', function (e) {
    if (!this.checkValidity()) { e.preventDefault(); e.stopPropagation(); }
    this.classList.add('was-validated');
  });
</script>

const f = document.getElementById('f');
f.requestSubmit();
await new Promise(r => setTimeout(r, 200));
console.log('was-validated class: ' + f.classList.contains('was-validated'));
console.log('field is invalid: ' + !document.getElementById('vn').checkValidity());
console.log('message color: ' + getComputedStyle(document.querySelector('.invalid-feedback')).color + ', display: ' + getComputedStyle(document.querySelector('.invalid-feedback')).display);

How it works

• The browser checks the required attribute with checkValidity().
• After was-validated is added, Bootstrap shows the red border and the .invalid-feedback text.

Read Form Validation.