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

to add a data list input with a datalist with a bunch of options that we can choose from. Bootstrap 5 provides consistent styling with the form-control class.

Select

We can style select elements with Bootstrap. To style it, we can use the .form-select class.

For example, we can write:

<select class="form-select">
  <option selected>select a fruit</option>
  <option value="1">apple</option>
  <option value="2">orange</option>
  <option value="3">grape</option>
</select>

to create a drop-down with Bootstrap styles.

Dropdown Sizing

The size of a dropdown can be changed with Bootstrap classes.

We can use the form-select-lg to make it large and form-select-sm to make it small.