How to remove the arrow in dropdown in Bootstrap 4? - css

Question

I am using Bootstrap 4. I tried to remove the arrow in dropdown.
The answers I found for Bootstrap 3 do not work any more.
The jsfiddle is here.
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>

Answer 1

Simply remove "dropdown-toggle" class from the element. The dropdown will still work if you have the data-toggle attribute as follows
<button role="button" type="button" class="btn" data-toggle="dropdown">
Dropdown Without Arrow
</button>
overriding .dropdown-toggle class styles affects all dropdowns and you may want to keep the arrow in other buttons, that's why this looks to me the simplest solution.
Edit: Keep dropdown class if you want to keep border styling
<button role="button" type="button" class="btn dropdown" data-toggle="dropdown">
Dropdown Without Arrow
</button>

Answer 2

With css, you could just do that:
.dropdown-toggle::after {
display:none;
}

Answer 3

I don't recommend any of the existing answers because:
.dropdown-toggle has more styling than just the caret. Removing the class from the element causes styling issues.
Overriding .dropdown-toggle doesn't make sense. Just because you don't need a caret on some particular element, doesn't mean you won't need one later.
::after doesn't cover dropdown variants (some use ::before).
Use a custom .caret-off in the same element as your .dropdown-toggle element:
.caret-off::before {
display: none;
}
.caret-off::after {
display: none;
}
Some have said they needed to add !important but YMMV.

Answer 4

remove the dropdown-toggle class

Answer 5

.dropdown-toggle::after {
content: none;
}
You can also try this

Answer 6

If you are interested in replacing the arrow with another Icon (such as, FontAwesome) you would just need to remove the border on the pseudo element of .dropdown-toggle
.dropdown-toggle::after { border: none; }

Answer 7

I was using the accepted answer for quite a while in my project but just now stumbled across a variable used by bootstrap:
$enable-caret: true !default;
If you set this to false then the caret will be removed without having to do any custom code.
My project was Ruby/Rails so I was using the bootstrap-rubygem. I changed the variable by importing a custom-variables.scss with the above variable set to false in my application.scss BEFORE the bootstrap.scss file/files.

Answer 8

If you remove fit the dropdown-toggle class as below, all the dropdown buttons on your system will no longer have the caret.
.dropdown-toggle::after {
display:none;
}
But maybe that's not what you want, so to remove just the specific button, we're going to insert a class called: remoecaret, and we'll fit the class: dropdown-toggle as follows:
.removecaret.dropdown-toggle::after {
display: none;
}
and our html looks something like:
<div class="btn-group">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle removecaret" data-toggle="dropdown">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i> Edit</li>
</ul>
</div>

Answer 9

Boostrap generates this using the CSS border:
.dropdown-toggle:after {
border: none;
}

Answer 10

If you wanna exactly only in this bootstrap button class, make:
.btn .dropdown-toggle::after {
display:none;
}

Answer 11

have you tried tag="a" within the class? it hides the arrow without further css.

Answer 12

Add no-arrow to drop-down toggle class declaration

Answer 13

This works on bootsrap4 and ng-bootstrap.
.dropdown-toggle:after {
display: none;
}