Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<form>
  <div class="mb-3">
    <label for="formGroupText" class="form-label">Text input label</label>
    <input type="text" class="form-control" placeholder="Text input placeholder" id="formGroupText">
  </div>
  <div class="mb-3">
    <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 class="row g-3">
    <div class="col-lg-7">
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
    <div class="col-lg-3">
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
    <div class="col-lg-2">
      <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 class="row gx-2 mb-4">
    <div class="col">
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
  </div>
  <div class="row g-4">
    <div class="col-6">
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
    <div class="col-6">
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
    <div class="col-6">
      <input type="text" class="form-control" placeholder="Text input placeholder" aria-label="Text input label">
    </div>
    <div class="col-6">
      <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 class="row mb-3">
    <label for="horizontalEmail" class="col-md-2 col-form-label">Email</label>
    <div class="col-md-10">
      <input type="email" class="form-control" id="horizontalEmail">
    </div>
  </div>
  <div class="row mb-3">
    <label for="horizontalPassword" class="col-md-2 col-form-label">Password</label>
    <div class="col-md-10">
      <input type="password" class="form-control" id="horizontalPassword">
    </div>
  </div>
  <fieldset>
    <div class="row mb-3">
      <legend class="col-md-2 col-form-label pt-0">Level</legend>
      <div class="col-md-10">
        <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 class="row mb-3">
    <label for="colFormLabelSmall" class="col-md-2 col-form-label col-form-label-sm">Small label</label>
    <div class="col-md-10">
      <input type="text" class="form-control form-control-sm" placeholder="Small form control" id="colFormLabelSmall">
    </div>
  </div>
  <div class="row mb-3">
    <label for="colFormLabelDefault" class="col-md-2 col-form-label">Default label</label>
    <div class="col-md-10">
      <input type="text" class="form-control" placeholder="Default form control" id="colFormLabelDefault">
    </div>
  </div>
  <div class="row mb-3">
    <label for="colFormLabelLarge" class="col-md-2 col-form-label col-form-label-lg">Large label</label>
    <div class="col-md-10">
      <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 class="row row-cols-md-auto g-2 align-items-center">
  <div class="col-12">
    <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 class="col-12">
    <label for="inlineInput" class="visually-hidden">Password</label>
    <input type="password" class="form-control" placeholder="Password" id="inlineInput">
  </div>
  <div class="col-12">
    <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 class="col-12">
    <button type="submit" class="btn btn-primary">Log in</button>
  </div>
</form>