You can hide the dropdown arrow from the DropDownButton by adding class e-caret-hide to DropDownButton element using cssClass property.
$enable-caret: true ! default; If you set this to false then the caret will be removed without having to do any custom code.
Use the . caret class in Bootstrap to create a caret arrow icon representing dropdown button.
Basic Dropdown To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
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>
With css, you could just do that:
.dropdown-toggle::after {
display:none;
}
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.
remove the dropdown-toggle
class
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; }
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With