How to remove the arrow in dropdown in Bootstrap 4?

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.

Answer 1

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;
}