Bootstrap 5 — Form Fields

Photo by Pel on Unsplash

Bootstrap 5 is in alpha when this is written and it’s subject to change. Bootstrap is a popular UI library for any JavaScript apps. In this article, we’ll look at how to style form fields with Bootstrap 5.

Color Picker

We can add a color picker with the type attribute set to color .

For example, we can write:

<div class="mb-3">
  <label for="color-input" class="form-label">Color picker</label>
  <input type="color" class="form-control form-control-color" id="color-input" value="#563d7c" title="Choose your color">
</div>

to add a color picker to our app.

We add the .form-control and .form-control-color to add the Bootstrap styles for the color picker.

Datalists

Bootstrap 5 has styles for data lists. A datalist lets us enter options and if there’s a match, we can select it.

To add one, we can write:

<div class="mb-3">
  <label for="exampleDataList" class="form-label">Fruit</label>
  <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
  <datalist id="datalistOptions">
    <option value="apple">
    <option value="orange">
    <option value="lemon">
    <option value="pear">
    <option value="grape">…