How to remove the arrow in dropdown in Bootstrap 4?

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.

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