How to remove the arrow in dropdown in Bootstrap 4?

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>

Solution 1:

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:

With css, you could just do that:

.dropdown-toggle::after {
    display:none;
}

Solution 3:

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:

remove the dropdown-toggle class

Solution 5:

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