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!
