Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<form>
  <div>
    <label for="formGroupText" class="form-label">Text input label</label>
    <input type="text" class="form-control" placeholder="Text input placeholder" id="formGroupText">
  </div>
  <div>
    <label for="formGroupText2" class="form-label">Text input label</label>
    <input type="text" class="form-control" placeholder="Text input placeholder" id="formGroupText2" aria-describedby="formGroupText2Help">
    <p id="formGroupText2Help" class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum.</p>
    <p class="valid-feedback">Valid feedback text</p>
    <p class="invalid-feedback">Invalid feedback text</p>
  </div>
</form>

   Copy to clipboard

   Open in CodePen

<form>
  <div>
    <div>
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
    <div>
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
    <div>
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
  </div>
</form>

   Copy to clipboard

   Open in CodePen

<form>
  <div>
    <div>
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
    <div>
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
  </div>
  <div>
    <div>
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
    <div>
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
    <div>
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
    <div>
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
  </div>
</form>

   Copy to clipboard

   Open in CodePen

<form>
  <div>
    <label for="horizontalEmail">Email</label>
    <div>
      <input type="email" class="form-control" id="horizontalEmail">
    </div>
  </div>
  <div>
    <label for="horizontalPassword">Password</label>
    <div>
      <input type="password" class="form-control" id="horizontalPassword">
    </div>
  </div>
  <fieldset>
    <div>
      <legend>Level</legend>
      <div>
        <div class="form-check">
          <input type="radio" class="form-check-input" name="horizontalRadio" id="horizontalRadio1">
          <label class="form-check-label" for="horizontalRadio1">Beginner</label>
        </div>
        <div class="form-check">
          <input type="radio" class="form-check-input" name="horizontalRadio" id="horizontalRadio2">
          <label class="form-check-label" for="horizontalRadio2">Intermediate</label>
        </div>
        <div class="form-check">
          <input type="radio" class="form-check-input" name="horizontalRadio" id="horizontalRadio3">
          <label class="form-check-label" for="horizontalRadio3">Advanced</label>
        </div>
      </div>
    </div>
  </fieldset>
  <button type="submit" class="btn btn-primary">Register</button>
</form>

   Copy to clipboard

   Open in CodePen

<form>
  <div>
    <label for="colFormLabelSmall">Small label</label>
    <div>
      <input type="text" class="form-control form-control-sm" placeholder="Small form control" id="colFormLabelSmall">
    </div>
  </div>
  <div>
    <label for="colFormLabelDefault">Default label</label>
    <div>
      <input type="text" class="form-control" placeholder="Default form control" id="colFormLabelDefault">
    </div>
  </div>
  <div>
    <label for="colFormLabelLarge">Large label</label>
    <div>
      <input type="text" class="form-control form-control-lg" placeholder="Large form control" id="colFormLabelLarge">
    </div>
  </div>
</form>

   Copy to clipboard

   Open in CodePen

<form>
  <div>
    <label for="inlineInputGroup" class="visually-hidden">Usermame</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" placeholder="Username" id="inlineInputGroup">
    </div>
  </div>
  <div>
    <label for="inlineInput" class="visually-hidden">Password</label>
    <input type="password" class="form-control" placeholder="Password" id="inlineInput">
  </div>
  <div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="inlineCheck">
      <label class="form-check-label" for="inlineCheck">Remember me</label>
    </div>
  </div>
  <div>
    <button type="submit" class="btn btn-primary">Log in</button>
  </div>
</form>