How to add image before optgroup label using Bootstrap ? Last Updated : 05 May, 2022 Comments Improve Suggest changes Like Article Like Report 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/[email protected]/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/[email protected]/dist/css/bootstrap-select.min.css"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/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: Comment More infoAdvertise with us Next Article How to add image before optgroup label using Bootstrap ? K krishnakripa Follow Improve Article Tags : Web Technologies HTML CSS Bootstrap CSS-Misc HTML-Misc Bootstrap-4 Bootstrap-Misc +4 More Similar Reads How to Add a Background Image using Bootstrap 5 ? Bootstrap 5 is one of the alternatives for CSS styling of the elements. Rather than defining the separate properties for the elements, we can directly apply the Bootstrap 5 classes for more attractive styling of the elements. We can add a background image to the application in Bootstrap 5 using vari 2 min read How to add icons in project using Bootstrap ? Bootstrap Icons is an open-source icon library specifically designed for use with Bootstrap's framework. Adding icons using Bootstrap means integrating the Bootstrap Icons library into your project and using its icon classes in HTML. This allows easy inclusion of scalable, customizable icons directl 2 min read How to fit the image into modal popup using Bootstrap? Modal plugin allows us to add a dialog popup window that is displayed on top of the current page. Bootstrap provides an easy, yet effective way to incorporate modal into our web pages. Modal can consist of any content along with a header and footer.Images can be fitted in modal popup using Bootstrap 2 min read How to add tooltip to an icon using Bootstrap ? In this article, we will see how to add tooltip element to an icon using Bootstrap. A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. The tooltip is quite useful for displaying the description of different elements on the webpage. 2 min read How to put images in a box without space using Bootstrap? Bootstrap 4 is a CSS a library for frontend web development developed by Twitter which helps the developer to beautify the way the webpage looks. The bootstrap library has pre-defined CSS classes that are easy to use and it helps the developer to provide an artistic look to the website with minimal 3 min read How to Add a Image to React Bootstrap dropdown ? In this article, we will see how to add an image to the React Bootstrap dropdown. It is a React-based implementation of the Bootstrap components. Dropdown Component provides a way to display lists of links or more actions within a menu when clicked over it. Steps to Create React Application and Inst 3 min read How to set div with left image and button at bottom using bootstrap? We can set div with left image and button at the bottom by two methods as follows: Method 1: Using bootstrap Float-left These utility classes float-left a component to the left or disable floating, based on the current viewport size utilizing the CSS float property. !important is included to dodge ( 4 min read How to Wrap Text Around Image in Bootstrap ? To wrap text around an image in Bootstrap 5, you can apply the 'float' utility classes along with the 'img-fluid' class for responsive images. This technique involves floating the image to the left or right and creating margins to allow the text to wrap around it. ApproachThe code uses Bootstrap 5 c 3 min read How to Align navbar logo to the left screen using Bootstrap ? It is very easy in Bootstrap to align items left and right by using the bootstrap classes. By default, it sets to left. If you want to align items center or right then it will be done by yourself. To align the navbar logo to the left of the screen with the Bootstrap method is a quick trick that can 2 min read How to place the image above the slider in mobile view in bootstrap? Making a responsive page in which the user has an image placed at the right of the range slider in desktop view. But in the mobile view, the image is overlapping with slider. Use grid columns as Bootstrap intended to solve this issue. Set the range column to pull-right for desktop view and flex-colu 2 min read Like