Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<form id="formValidationDefault">
  <div class="mb-3">
    <label for="validationDefaultText">Text input</label>
    <input type="text" class="form-control" id="validationDefaultText">
  </div>
  <div class="mb-3">
    <div class="input-group">
      <span class="input-group-text" id="validationDefaultInputGroup">$</span>
      <input type="number" class="form-control" aria-label="Amount" aria-describedby="validationDefaultInputGroup">
    </div>
  </div>
  <div class="mb-3">
    <label for="validationDefaultTextarea">Textarea</label>
    <textarea class="form-control" id="validationDefaultTextarea" rows="5" placeholder="Write your message here."></textarea>
  </div>
  <div class="mb-3">
    <label for="validationDefaultSelect">Select one</label>
    <select class="form-select" id="validationDefaultSelect">
      <option value="">Select</option>
      <option value="1">Option one</option>
      <option value="2">Option two</option>
      <option value="3">Option three</option>
    </select>
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="validationDefaultCheck">
      <label class="form-check-label" for="validationDefaultCheck">Checkbox</label>
    </div>
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="radio" class="form-check-input" name="validationDefaultRadio" id="validationDefaultRadio1">
      <label class="form-check-label" for="validationDefaultRadio1">Radio</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" name="validationDefaultRadio" id="validationDefaultRadio2">
      <label class="form-check-label" for="validationDefaultRadio2">Radio</label>
    </div>
  </div>
  <div class="mb-3">
    <div class="form-check form-switch">
      <input type="checkbox" class="form-check-input" id="validationDefaultSwitch">
      <label class="form-check-label" for="validationDefaultSwitch">Switch</label>
    </div>
  </div>
  <div class="mb-3">
    <div class="form-file">
      <input type="file" class="form-file-input" id="validationDefaultFile">
      <label class="form-file-label" for="validationDefaultFile">
        <span class="form-file-text">Choose file...</span>
        <span class="form-file-button">Browse</span>
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit form</button>
</form>

   Copy to clipboard

   Open in CodePen

<form id="formValidationClient">
  <div class="mb-3">
    <label for="validationClientText">Text input</label>
    <input type="text" class="form-control" id="validationClientText">
  </div>
  <div class="mb-3">
    <div class="input-group">
      <span class="input-group-text" id="validationClientInputGroup">$</span>
      <input type="number" class="form-control" aria-label="Amount" aria-describedby="validationClientInputGroup">
    </div>
  </div>
  <div class="mb-3">
    <label for="validationClientTextarea">Textarea</label>
    <textarea class="form-control" id="validationClientTextarea" rows="5" placeholder="Write your message here."></textarea>
  </div>
  <div class="mb-3">
    <label for="validationClientSelect">Select one</label>
    <select class="form-select" id="validationClientSelect">
      <option value="">Select</option>
      <option value="1">Option one</option>
      <option value="2">Option two</option>
      <option value="3">Option three</option>
    </select>
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="validationClientCheck">
      <label class="form-check-label" for="validationClientCheck">Checkbox</label>
    </div>
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="radio" class="form-check-input" name="validationClientRadio" id="validationClientRadio1">
      <label class="form-check-label" for="validationClientRadio1">Radio</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" name="validationClientRadio" id="validationClientRadio2">
      <label class="form-check-label" for="validationClientRadio2">Radio</label>
    </div>
  </div>
  <div class="mb-3">
    <div class="form-check form-switch">
      <input type="checkbox" class="form-check-input" id="validationClientSwitch">
      <label class="form-check-label" for="validationClientSwitch">Switch</label>
    </div>
  </div>
  <div class="mb-3">
    <div class="form-file">
      <input type="file" class="form-file-input" id="validationClientFile">
      <label class="form-file-label" for="validationClientFile">
        <span class="form-file-text">Choose file...</span>
        <span class="form-file-button">Browse</span>
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit form</button>
</form>

   Copy to clipboard

   Open in CodePen

<form id="formValidationServer">
  <div class="mb-3">
    <label for="validationServerText">Text input</label>
    <input type="text" class="form-control" id="validationServerText">
  </div>
  <div class="mb-3">
    <div class="input-group">
      <span class="input-group-text" id="validationServerInputGroup">$</span>
      <input type="number" class="form-control" aria-label="Amount" aria-describedby="validationServerInputGroup">
    </div>
  </div>
  <div class="mb-3">
    <label for="validationServerTextarea">Textarea</label>
    <textarea class="form-control" id="validationServerTextarea" rows="5" placeholder="Write your message here."></textarea>
  </div>
  <div class="mb-3">
    <label for="validationServerSelect">Select one</label>
    <select class="form-select" id="validationServerSelect">
      <option value="">Select</option>
      <option value="1">Option one</option>
      <option value="2">Option two</option>
      <option value="3">Option three</option>
    </select>
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="validationServerCheck">
      <label class="form-check-label" for="validationServerCheck">Checkbox</label>
    </div>
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="radio" class="form-check-input" name="validationServerRadio" id="validationServerRadio1">
      <label class="form-check-label" for="validationServerRadio1">Radio</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" name="validationServerRadio" id="validationServerRadio2">
      <label class="form-check-label" for="validationServerRadio2">Radio</label>
    </div>
  </div>
  <div class="mb-3">
    <div class="form-check form-switch">
      <input type="checkbox" class="form-check-input" id="validationServerSwitch">
      <label class="form-check-label" for="validationServerSwitch">Switch</label>
    </div>
  </div>
  <div class="mb-3">
    <div class="form-file">
      <input type="file" class="form-file-input" id="validationServerFile">
      <label class="form-file-label" for="validationServerFile">
        <span class="form-file-text">Choose file...</span>
        <span class="form-file-button">Browse</span>
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit form</button>
</form>

   Copy to clipboard

   Open in CodePen

<form id="formValidationTooltips">
  <div class="mb-3 position-relative">
    <label for="validationTooltipsText">Text input</label>
    <input type="text" class="form-control" id="validationTooltipsText">
  </div>
  <div class="mb-3 position-relative">
    <div class="input-group">
      <span class="input-group-text" id="validationTooltipsInputGroup">$</span>
      <input type="number" class="form-control" aria-label="Amount" aria-describedby="validationTooltipsInputGroup">
    </div>
  </div>
  <div class="mb-3 position-relative">
    <label for="validationTooltipsTextarea">Textarea</label>
    <textarea class="form-control" id="validationTooltipsTextarea" rows="5" placeholder="Write your message here."></textarea>
  </div>
  <div class="mb-3 position-relative">
    <label for="validationTooltipsSelect">Select one</label>
    <select class="form-select" id="validationTooltipsSelect">
      <option value="">Select</option>
      <option value="1">Option one</option>
      <option value="2">Option two</option>
      <option value="3">Option three</option>
    </select>
  </div>
  <div class="mb-3 position-relative">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="validationTooltipsCheck">
      <label class="form-check-label" for="validationTooltipsCheck">Checkbox</label>
    </div>
  </div>
  <div class="mb-3 position-relative">
    <div class="form-check">
      <input type="radio" class="form-check-input" name="validationTooltipsRadio" id="validationTooltipsRadio1">
      <label class="form-check-label" for="validationTooltipsRadio1">Radio</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" name="validationTooltipsRadio" id="validationTooltipsRadio2">
      <label class="form-check-label" for="validationTooltipsRadio2">Radio</label>
    </div>
  </div>
  <div class="mb-3 position-relative">
    <div class="form-check form-switch">
      <input type="checkbox" class="form-check-input" id="validationTooltipsSwitch">
      <label class="form-check-label" for="validationTooltipsSwitch">Switch</label>
    </div>
  </div>
  <div class="mb-3 position-relative">
    <div class="form-file">
      <input type="file" class="form-file-input" id="validationTooltipsFile">
      <label class="form-file-label" for="validationTooltipsFile">
        <span class="form-file-text">Choose file...</span>
        <span class="form-file-button">Browse</span>
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit form</button>
</form>