How to add image before optgroup label using Bootstrap?

Introduction

When building web pages using Bootstrap, it may be useful to add an image before the label of an optgroup element. This can help to visually group options within a select element and make the page more user-friendly. In this article, we will discuss adding an image before the label of an optgroup element using Bootstrap.

What is an optgroup?

An optgroup is an HTML element that groups related options within a select element. The optgroup element creates a label for the group of options, and the options within the optgroup are indented and visually grouped together.

Syntax

<select>
   <optgroup label="Group 1">
      <option>Option 1</option>
      <option>Option 2</option>
   </optgroup>
   <optgroup label="Group 2">
      <option>Option 3</option>
      <option>Option 4</option>
   </optgroup>
</select>

Let us understand this better through an example with code.

Example

In this example, we will add an image before the label of an optgroup element using Bootstrap and HTML.

Step 1 − Create an index.html file using the file explorer in your project directory.

Step 2 − Include the necessary meta tags, scripts, and styles in the head section of the HTML file. This includes links to the Bootstrap CSS and JavaScript files, as well as the bootstrapselect library.

<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>

Step 3 − Next, we create a div with the class "d-flex align-items-center" that will be used to center the select element.

<div class="d-flex align-items-center">

Step 4 − Inside the div, we create a select element with the class "selectpicker". This class is used to apply Bootstrap's styling to the select element.

<select class="selectpicker">

Step 5 − Within the select element, we create two optgroup elements. Each optgroup element has a label that includes an image. The image is added using an "img" tag and the "src" attribute is set to the URL of the image. The label text is the text that will be displayed next to the image. Inside each optgroup element, we have several option elements. These are the options that will be displayed in the select element.

<optgroup label=
   "<img src='https://cdn-icons-png.flaticon.com/128/3085/3085330.png'> Type 1">
   <option value="one">Car 1</option>
   <option value="two">Car 2</option>
   <option value="three">Car 3</option>
</optgroup>

Step 6 − Next, we have a script tag that contains JavaScript code which is used to handle the event when the select element is shown. The script uses jQuery to select all elements with the class "dropdown-header" within the select element.

<script>
   $('.selectpicker').on('shown.bs.select', function () {
   })
</script>

Step 7 − Inside the script, we use each() method to loop through all the dropdown-header elements. We check if the element has the attribute "data-unescaped" with a value of "1" −

$('.bootstrap-select .dropdown-header').each(function () {
   if ((this.dataset.unescaped || '1') == '1' }

Step 8 − If the element has the attribute "data-unescaped" with a value of "1", we set the html of the element to be the text of the element.

$('.bootstrap-select .dropdown-header').each(function () {
   if ((this.dataset.unescaped || '1') == '1') {
      let element = $(this);
      element.html(element.text());
      element.attr('data-unescaped', '0');
   }

Step 9 − With this code, we are able to add images before the label of an optgroup element using Bootstrap.

Example

<!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: 20px;
      }
   </style>
</head>
<body>
   <h1>Welcome to Tutorials Point</h1>
   <div class="d-flex align-items-center">
      <select class="selectpicker">
         <optgroup label=
            "<img src='https://cdn-icons-png.flaticon.com/128/3085/3085330.png'> Type 1">
            <option value="one">Car 1</option>
            <option value="two">Car 2</option>
            <option value="three">Car 3</option>
         </optgroup>
         <optgroup label=
            "<img src='https://cdn-icons-png.flaticon.com/128/3202/3202926.png'> Type 2">
            <option value="4">Car 4</option>
            <option value="5"Car >5</option>
            <option value="6">Car 6</option>
         </optgroup>
      </select>
   </div>
   <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>

Conclusion

In this article, we discussed adding an image before the label of an optgroup element using Bootstrap. We first covered what an optgroup is and its syntax. Then, we provided a step-bystep guide with code snippets on how to create an HTML file and implement the necessary scripts and styles to display an image before the label of an optgroup element using Bootstrap. We also demonstrated how to handle events using JavaScript. This technique can be useful in making web pages more user-friendly by visually grouping options within a select element.