Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove the arrow in dropdown in Bootstrap 4?

People also ask

How do you hide arrows in dropdown?

You can hide the dropdown arrow from the DropDownButton by adding class e-caret-hide to DropDownButton element using cssClass property.

How do I remove dropdown caret?

$enable-caret: true ! default; If you set this to false then the caret will be removed without having to do any custom code.

How can add arrow in dropdown in Bootstrap?

Use the . caret class in Bootstrap to create a caret arrow icon representing dropdown button.

How do I style a dropdown in Bootstrap?

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.