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 =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
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 =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
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
Share your thoughts in the comments
Please Login to comment...