Categories
Bootstrap HTML

Bootstrap 5 — Form Fields

Spread the love

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.

Boottstrap 5 provides all the styles.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.