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.

For example, we can write:

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

to make the dropdown large and:

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

to make it small.

The multiple attribute is also supported by Bootstrap:

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

The size attribute can be adjusted to only display the given number of items at once:

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

Checkboxes

Bootstrap 5 provides classes to let us add consistent styles for checkboxes. To do that, we can use the .form-check class that improves the layout and behavior of the element.

For example, we can write:

<div class="form-check">  
  <input class="form-check-input" type="checkbox" value="" id="apple">  
  <label class="form-check-label" for="apple">  
    apple  
  </label>  
</div>  
<div class="form-check">  
  <input class="form-check-input" type="checkbox" value="" id="orange" checked>  
  <label class="form-check-label" for="orange">  
    orange  
  </label>  
</div>

to add the checkboxes.

We have a div with the .form-check class. Inside it, we add the input with type checkbox to add the checkbox. They’re styles with the .form-check-input class.

To add a label, we can add the .form-check-label class to add the text beside the checkbox.

Indeterminate

We can use JavaScript to set the :indeterminate pseudoclass to make an indeterminate checkbox.

For example, we can write:

<div class="form-check">  
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">  
  <label class="form-check-label" for="flexCheckIndeterminate">  
    Indeterminate checkbox  
  </label>  
</div>

in our HTML code and then add:

document.getElementById("flexCheckIndeterminate").indeterminate = true;

in our JavaScript to make an indeterminate checkbox.

Disabled

We can make a checkbox disabled with the disabled attribute.

For example, we can write:

<div class="form-check">  
  <input class="form-check-input" type="checkbox" value="" id="apple" disabled>  
  <label class="form-check-label" for="apple">  
    apple  
  </label>  
</div><div class="form-check">  
  <input class="form-check-input" type="checkbox" value="" id="orange" checked disabled>  
  <label class="form-check-label" for="orange">  
    orange  
  </label>  
</div>

We added 2 checkboxes with the disabled attribute to disable them.

checked makes it checked.

Conclusion

We can add datalists, color pickers, and checkboxes to our app. Bootstrap 5 provides all the styles. Thanks for reading my article, I hope you found it helpful!