Bootstrap 5 Form controls Color

Last Updated : 23 Nov, 2022

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/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css"
         rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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 Datalists

vkash8574

Improve

Article Tags :

Bootstrap 5 Form controls Color

Similar Reads

Forms

Form controls

Form Select

Form Checks and radios

Form Range

Form Input group

Form Floating labels

Form Validation

Thank You!

What kind of Experience do you want to share?