I am trying to remove the arrow that appears on a drop down menu in Twitter Bootstrap framework. Has anyone figured a way of removing the arrows?
If you copy an existing Bootstrap dropdown example, the menu button tag looks something like this:
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Name</button>
Removing the dropdown-toggle
class removes the arrow (or caret):
<button class="btn btn-primary" type="button" data-toggle="dropdown">Menu Name</button>
In Bootstrap4 remove "dropdown-toggle" class from "a" element.
From: https://getbootstrap.com/2.3.2/components.html#buttonDropdowns
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
If you remove <span class="caret"></span>
the arrow is not shown.
Tried it using the dev. console in Chrome, and seems to work.
add .dropdown-toggle-split
class in the tag
.dropdown-toggle::after{
display: none;
}
The only thing that worked for me was that I removed class="caret"
if you are using bootstrap dropdown. Hope this work for you too.