Bootstrap 5 Learning Kit

XSXSSMSMMDMDLGLGXLXLXXLXXL
Extra small: <576pxSmall: ≥576pxMedium: ≥768pxLarge: ≥992pxExtra large: ≥1200pxExtra extra large: ≥1400px
Page Navigation:
DefaultWith valueValidationTextareaSelect

Floating labels

Default

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

With value

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

Validation

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

Textarea

Default

Custom height

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

Select

<div>
  <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>
</div>
<div> <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> </div>