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.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 5 Form controls Color</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h2>Bootstrap 5 Form controls Color</h2>

        <label for="GFG_Color" class="form-label">
            Select Color
        </label>
        <input type="color" class="m-auto 
            form-control form-control-color" 
            id="GFG_Color" value="#006600">
    </div>
</body>
</html>

Output:

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.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap5 Form controls Color</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
         rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
          integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
         crossorigin="anonymous">
    </script>
</head>

<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h2>Bootstrap 5 Form controls Color</h2>

        <label for="GFG_Color" class="form-label">
            Select Color
        </label>
        <input type="color" class="form-control" 
            list="colors" id="GFG_Color" 
            placeholder="Select Color">
        <datalist id="colors">
            <option value="#ff0000"></option>
            <option value="#00ff00"></option>
            <option value="#0000ff"></option>
            <option value="#660000"></option>
            <option value="#006600"></option>
            <option value="#000066"></option>
            <option value="#cc0000"></option>
            <option value="#00cc00"></option>
            <option value="#0034af"></option>
        </datalist>
    </div>
</body>
</html>

Output:

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

Bootstrap 5 Form controls Color

Explore