How to add image before optgroup label using Bootstrap ? - GeeksforGeeks

05 May, 2022
What is optgroup label?
It is an HTML tag that is used to group the options given in <select> tag. This combines the options in different groups having different labels.
Syntax: 
HTML
<optgroup label="text">    <option value="One">One</option>    <option value="Two">Two</option></optgroup>
If we need to add an image before optgroup label using bootstrap than we have to put “image” tag in label giving the source location of the image with the label name.
Example: The following example demonstrates the optgroup having image before label using Bootstrap.
HTML
<!DOCTYPE html><html lang="en"><head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport"        content="width=device-width, initial-scale=1,        shrink-to-fit=no">    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">    </script>    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">    </script>    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">    </script>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js">    </script>    <style>        .bootstrap-select img {            width: 16px;        }    </style></head><body>    <select class="selectpicker">        <optgroup label=            "<img src='https://openmoji.org/data/color/svg/1F600.svg'> Numbers">            <option value="1">One</option>            <option value="2">Two</option>            <option value="3">Three</option>        </optgroup>        <optgroup label=            "<img src='https://openmoji.org/data/color/svg/1F923.svg'> Digits">            <option value="Four">4</option>            <option value="Five">5</option>            <option value="Six">6</option>        </optgroup>    </select>    <script>        $('.selectpicker').on('shown.bs.select', function () {            $('.bootstrap-select .dropdown-header').each(function () {                if ((this.dataset.unescaped || '1') == '1') {                    let element = $(this);                    element.html(element.text());                    element.attr('data-unescaped', '0');                }            })        })    </script></body></html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
sahilintern
Bootstrap-4
Bootstrap-Misc
CSS-Misc
HTML-Misc
Bootstrap
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?