Solution
Simply add the following CSS style to override the default style of the .dropdown-toggle::after pseudo-element:
.dropdown-toggle::after {
display:none;
}
Why?
By default bootstrap adds the arrow to the dropdown component via the ::after pseudo-element.
Doing this removes it.
Here is a LIVE DEMO demonstrating it.
How do you work it out?
Using chrome dev tools you can inspect the element:
We can see from the above that there is a style set for a pseudo-element ::after on the .dropdown-toggle class. Let’s go and change the properties of the element! For this purpose we are changing the display property to none:
The pseudo-element is no longer there!!:
