Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

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

   Copy to clipboard

   Open in CodePen

<label for="textarea" class="form-label">Textarea</label>
<textarea class="form-control" id="textarea" rows="5" placeholder="Write your message here."></textarea>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Small</h4>
<label for="inputTextSmall" class="form-label">Text input label</label>
<input type="text" class="form-control form-control-sm" placeholder="Text input placeholder" id="inputTextSmall">
<h4 class="h5 text-muted mt-3">Large</h4>
<label for="inputTextLarge" class="form-label">Text input label</label>
<input type="text" class="form-control form-control-lg" placeholder="Text input placeholder" id="inputTextLarge">

   Copy to clipboard

   Open in CodePen

<label for="inputTextReadonly" class="form-label">Text input label</label>
<input type="text" class="form-control" placeholder="Text input placeholder" id="inputTextReadonly" readonly="">

   Copy to clipboard

   Open in CodePen

<label for="inputTextReadonlyPlaintext" class="form-label">Text input label</label>
<input type="text" class="form-control-plaintext" placeholder="Text input placeholder" id="inputTextReadonlyPlaintext" readonly="">

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Default</h4>
<label class="form-label" for="inputFile">Default file input label</label>
<input type="file" class="form-control" id="inputFile">
<h4 class="h5 text-muted mt-3">Multiple</h4>
<label class="form-label" for="inputFileMultiple">Multiple file input label</label>
<input type="file" class="form-control" id="inputFileMultiple" multiple="">
<h4 class="h5 text-muted mt-3">Disabled</h4>
<label class="form-label" for="inputFileDisabled">Disabled file input label</label>
<input type="file" class="form-control" id="inputFileDisabled" disabled="">
<h4 class="h5 text-muted mt-3">Small</h4>
<label class="form-label" for="inputFileSmall">Small file input label</label>
<input type="file" class="form-control form-control-sm" id="inputFileSmall">
<h4 class="h5 text-muted mt-3">Large</h4>
<label class="form-label" for="inputFileLarge">Large file input label</label>
<input type="file" class="form-control form-control-lg" id="inputFileLarge">

   Copy to clipboard

   Open in CodePen

<label for="inputColor" class="form-label">Color input label</label>
<input type="color" class="form-control form-control-color" id="inputColor" value="#7952b3" title="Choose color">

   Copy to clipboard

   Open in CodePen

<label for="datalist" class="form-label">Datalist label</label>
<input class="form-control" list="datalistOptions" id="datalist" placeholder="Type to search...">
<datalist id="datalistOptions">
  <option value="Bootstrap">
  </option><option value="Foundation">
  </option><option value="Semantic UI">
  </option><option value="Bulma">
  </option><option value="Materialize">
</option></datalist>