Bootstrap 5 Form controls Color

Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites. It was officially released on 16 June 2020 after several months of redefining its features.

Bootstrap 5 Form Control Color is used to set the color in the color type input field. To create a color-type input field, type="color" attribute is used in <input> element.

Form Control Color

 

Used class:

• form-control-color: This class is used in <input> element and used to create a color input field.

Syntax:

<label for="colorfield" class="form-label">
 Color picker
</label>
<input type="color" 
 class="form-control form-control-color" 
 id="colorfield" value="..." title="...">

Example 1: In this example, we will use <label> and <input> elements with .form-label, .form-control, and .form-control-color classes to create a color input field.

Output:

👁 Image

Example 2: In this example, we will use <label>, <input>, <datalist>, and <option> elements with .form-label, and .form-control classes to create a color select option input field.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/forms/form-control/#color