How to remove the arrow in dropdown in Bootstrap 4?
CssTwitter BootstrapTwitter Bootstrap-4Css Problem Overview
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>
Css Solutions
Solution 1 - Css
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>
Solution 2 - Css
With css, you could just do that:
.dropdown-toggle::after {
display:none;
}
Solution 3 - Css
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.
Solution 4 - Css
remove the dropdown-toggle
class
Solution 5 - Css
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; }
Solution 6 - Css
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.
Solution 7 - Css
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="#"><a href="#"><i class="fa fa-cog" aria-hidden="true"></i> Edit</a></li>
</ul>
</div>
Solution 8 - Css
.dropdown-toggle::after {
content: none;
}
You can also try this
Solution 9 - Css
Boostrap generates this using the CSS border:
.dropdown-toggle:after {
border: none;
}
Solution 10 - Css
If you wanna exactly only in this bootstrap button class, make:
.btn .dropdown-toggle::after {
display:none;
}
Solution 11 - Css
have you tried tag="a" within the class? it hides the arrow without further css.
Solution 12 - Css
Add no-arrow to drop-down toggle class declaration
Solution 13 - Css
This works on bootsrap4 and ng-bootstrap.
.dropdown-toggle:after {
display: none;
}