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

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>

Answer 2

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

You can also try this

Answer 3

Boostrap generates this using the CSS border:

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

Answer 4

If you wanna exactly only in this bootstrap button class, make:

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

Answer 5

If you remove fit the dropdown-toggle class as below, all the dropdown buttons on your system will no longer have the caret.

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

But maybe that's not what you want, so to remove just the specific button, we're going to insert a class called: remoecaret, and we'll fit the class: dropdown-toggle as follows:

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

and our html looks something like:

<div class="btn-group">
  <button class="btn btn-outline-secondary btn-sm dropdown-toggle removecaret" data-toggle="dropdown">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#"><a href="#"><i class="fa fa-cog" aria-hidden="true"></i>&nbsp;Edit</a></li>
  </ul>
</div>

Answer 6

have you tried tag="a" within the class? it hides the arrow without further css.