How to change Dropdown Icon on Bootstrap 5?
Last Updated :
24 Apr, 2025
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not hovering this is an intentional design decision. In this article, we will learn How to change the Dropdown Icon on Bootstrap 5.
The following approaches are used to change Dropdowns:
Approach 1: Using <i class="fa fa-bug"></i>
Using <i class="fa fa-bug"></i> Also change data-toggle to data-bs-toggle
Syntax:
<button type="button"
class="btn btn-success
dropdown-bs-toggle"
data-toggle="dropdown">
Select CS Subjects
<i class="fa fa-bug"></i>
</button>
Example: Below is the implementation of the above approach
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<center>
<div class="container mt-3">
<h2 class="text-success">
GeeksforGeeks
</h2>
<h2>How to change Dropdown Icon on Bootstrap 5?</h2>
<div class="dropdown">
<button type="button"
class="btn btn-success dropdown-bs-toggle"
data-toggle="dropdown">
Select CS Subjects
<i class="fa fa-bug"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Data Structure
</a>
<a class="dropdown-item" href="#">
Algorithm
</a>
<a class="dropdown-item" href="#">
Operating System
</a>
<a class="dropdown-item" href="#">
Computer Networks
</a>
</div>
</div>
</div>
</center>
</body>
</html>
Output:
Approach 2: Using content to set the variable
Using content to set the variable. As we know that default caret isn't an icon, rather a border. Meaning, If you set .dropdown-toggle::after to have border:none!important, you can the use content to set the icon you want.
Syntax:
<style>
.dropdown-toggle::after {
border: none !important;
font: normal normal normal 14px/1 FontAwesome;
content: "\f188" !important;
}
</style>
Example: Below is the implementation of the above approach
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.dropdown-toggle::after {
border: none !important;
font: normal normal normal 14px/1 FontAwesome;
content: "\f188" !important;
}
</style>
<body>
<center>
<div class="container mt-3">
<h2 class="text-success">
GeeksforGeeks
</h2>
<h2>
How to change Dropdown
Icon on Bootstrap 5?
</h2>
<div class="dropdown">
<button type="button"
class="btn btn-success
dropdown-toggle"
data-toggle="dropdown">
Select CS Subjects
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Data Structure
</a>
<a class="dropdown-item" href="#">
Algorithm
</a>
<a class="dropdown-item" href="#">
Operating System
</a>
<a class="dropdown-item" href="#">
Computer Networks
</a>
</div>
</div>
</div>
</center>
</body>
</html>
Output:
Approach 3: Using <span> tag
Syntax:
<button type="button"
class="btn btn-success
dropdown-bs-toggle"
data-toggle="dropdown">
Select CS Subjects
<span class="fa fa-bug"></span>
</button>
Example: Below is the implementation of the above approach
JavaScript
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<center>
<div class="container mt-3">
<h2 class="text-success">
GeeksforGeeks
</h2>
<h2>How to change Dropdown Icon on Bootstrap 5?</h2>
<div class="dropdown">
<button type="button"
class="btn btn-success dropdown-bs-toggle"
data-toggle="dropdown">
Select CS Subjects
<span class="fa fa-bug"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Data Structure
</a>
<a class="dropdown-item" href="#">
Algorithm
</a>
<a class="dropdown-item" href="#">
Operating System
</a>
<a class="dropdown-item" href="#">
Computer Networks
</a>
</div>
</div>
</div>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">
</script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<center>
<div class="container mt-3">
<h2 class="text-success">
GeeksforGeeks
</h2>
<h2>
How to change Dropdown
Icon on Bootstrap 5?
</h2>
<div class="dropdown">
<button type="button"
class="btn btn-success
dropdown-bs-toggle"
data-toggle="dropdown">
Select CS Subjects
<span class="fa fa-bug"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Data Structure
</a>
<a class="dropdown-item" href="#">
Algorithm
</a>
<a class="dropdown-item" href="#">
Operating System
</a>
<a class="dropdown-item" href="#">
Computer Networks
</a>
</div>
</div>
</div>
</center>
</body>
</html>
Output:
Similar Reads
How to create a dropdown menu in Bootstrap ?
A dropdown menu offers a list of alternatives when clicked or hovered on, which is a clean method of providing a list of alternatives as only one option is displayed initially onto the screen. Drop-down menus are used in almost all types of software nowadays to show sub-options of the option. Step 1
2 min read
How to Change Button Color in Bootstrap 5 ?
Bootstrap 5 provides developers with a lot of capabilities that enable them to create responsive and aesthetically pleasing online apps. Developers frequently require customizations, such as altering button colors to better reflect their branding or design philosophies. This post will walk you throu
2 min read
How to Change Navigation Bar Color in Bootstrap?
Changing the navigation bar color in Bootstrap means customizing the appearance of the navbar by modifying its background, text, or other styling elements. Below are the approaches to change the color of the navigation bar in Bootstrap:Table of ContentUsing the inbuilt color classesCreating a custom
3 min read
How to remove arrow in dropdown in Bootstrap ?
Dropdowns are one of the important components that are an integral part of any web application. Bootstrap provides its own interactive version of this component. Bootstrap dropdowns are toggled by clicking, not hovering as it was an intentional design decision. To use Dropdowns in a web project, inc
2 min read
How to open dropdown menu on hover in Bootstrap ?
Here is the task to open the dropdown menu on hover in Bootstrap. The dropdown on mouseover can be done using the following methods. Using the jQuery hover() method: It is used to specify two functions to start when mouse pointer move over the selected element. Syntax: $(selector).hover(Function_in,
3 min read
How to add dropdown search bar in Bootstrap?
A dropdown search bar in Bootstrap combines a text input field with a dropdown menu, providing users with options to select from while allowing them to input custom search queries. It enhances user experience by offering both flexibility and convenience.Preview of final output: Let us have a look at
2 min read
Bootstrap 5 Dropdowns Options
Bootstrap 5 Dropdowns Options can be passed through the data attributes or JavaScript.Bootstrap 5 Dropdowns OptionsUsing function with popperConfig: We can use this by configuring the JavaScript file.var dropdown = new bootstrap.Dropdown(element, { popperConfig: function (defaultBsPopperConfig) { //
2 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
Bootstrap 5 Dropdowns Menu Content Text
Bootstrap 5 Dropdowns Menu Content text is placed in the freeform in the dropdown menu. There is no special margin to place the text within a dropdown menu.Pre-requisite: Bootstrap 5 Dropdown, Bootstrap 5 Spacing & Bootstrap 5 Buttons.Bootstrap 5 Dropdowns Menu content Text classes: No specific
2 min read
How to create a form within dropdown menu using Bootstrap ?
A Dropdown menu is used to allow the user to choose the content from the menu as per their requirement and it is used to save screen space and avoid the long scrolling of the web pages. In web design, we often come in a scenario where we need to create a form within the dropdown menu to get some use
3 min read