Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<div class="form-floating">
  <input type="text" class="form-control" placeholder="Text input placeholder" id="floatingLabelDefault">
  <label for="floatingLabelDefault" class="form-label">Text input label</label>
</div>

   Copy to clipboard

   Open in CodePen

<div class="form-floating">
  <input type="text" class="form-control" placeholder="Text input placeholder" id="floatingLabelValue" value="Text input value">
  <label for="floatingLabelValue" class="form-label">Text input label</label>
</div>

   Copy to clipboard

   Open in CodePen

<div class="form-floating">
  <input type="text" class="form-control is-valid" placeholder="Text input placeholder" id="floatingLabelValidation" value="Text input value">
  <label for="floatingLabelValidation" class="form-label">Text input label</label>
</div>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Default</h4>
<div class="form-floating">
  <textarea class="form-control" placeholder="Textarea placeholder" id="floatingLabelTextareaDefault"></textarea>
  <label for="floatingLabelTextareaDefault" class="form-label">Textarea label</label>
</div>
<h4 class="h5 text-muted mt-3">Custom height</h4>
<div class="form-floating">
  <textarea class="form-control" placeholder="Textarea placeholder" id="floatingLabelTextareaHeight" style="height: 100px;"></textarea>
  <label for="floatingLabelTextareaHeight" class="form-label">Textarea label</label>
</div>

   Copy to clipboard

   Open in CodePen

<div class="form-floating">
  <select class="form-select" aria-label="Select" id="floatingLabelSelect">
    <option selected="">Select option</option>
    <option value="1">Option one</option>
    <option value="2">Option two</option>
    <option value="3">Option three</option>
    <option value="4">Option four</option>
    <option value="5">Option five</option>
  </select>
  <label for="floatingLabelSelect" class="form-label">Select label</label>
</div>