Signup/Sign In

How to remove the arrow in dropdown in Bootstrap?

A drop-down is like a list box that shows only one item when inactive. When we click on it, it shows the full list. Bootstrap provides one such component called Bootstrap dropdown.

It is toggleable and has a predefined list of items that can be selected on clicking.

Creating a dropdown in Bootstrap

To create a dropdown, add the .dropdown class in your code and then use .dropdown-toggle and .data-toggle="dropdown" properties with <button> element before dropdown-menu class.

  • Include .dropdown-menu class under <div> tag to create dropdown menu.
  • To add items in the dropdown menu, use .dropdown-item class inside <a> element.

Here is an example of creating a dropdown.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Bootstrap Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
	<div class="dropdown">
	  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
		Dropdown button
	  </button>
	  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
		<li><a class="dropdown-item" href="#">Action</a></li>
		<li><a class="dropdown-item" href="#">Another action</a></li>
		<li><a class="dropdown-item" href="#">Something else here</a></li>
	  </ul>
	</div>
</body>
</html>

Output:

Here is the output of the above program. As you can see the dropdown button has a text and an arrow symbol within.

Dropdown

Removing the arrow from the dropdown in Bootstrap

To remove the arrow from the dropdown you just need to remove the .dropdown-toggle class from the <button> element in the code. The rest of the code remains the same. We will see that now the dropdown has no arrow within it.

<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
    <div class="dropdown">
  <button class="btn btn-secondary " type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>
</body>
</html>

Output

Here is the output of the above program. You can see that there is no arrow on the dropdown button.

Dropdown without arrow

Conclusion

So, we can successfully remove the arrow from the dropdown button by removing the .data-toggle class from the button.