CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-4
Hongbo Miao
Hongbo Miao

Reputation: 49724

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>

Upvotes: 180

Views: 181955

Answers (13)

Abdullah Alkurdi
Abdullah Alkurdi

Reputation: 418

remove the dropdown-toggle class

Upvotes: 30

rybo111
rybo111

Reputation: 12588

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.

Upvotes: 84

İlter Kağan &#214;cal
İlter Kağan &#214;cal

Reputation: 3690

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>

Upvotes: 310

Epsi Vennila
Epsi Vennila

Reputation: 190

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

You can also try this

Upvotes: 9

jerryurenaa
jerryurenaa

Reputation: 4704

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

Upvotes: 0

Carl Leiner
Carl Leiner

Reputation: 1

Add no-arrow to drop-down toggle class declaration

Upvotes: -1

Sb. R
Sb. R

Reputation: 31

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

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

Upvotes: 1

krekto
krekto

Reputation: 1487

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>

Upvotes: 4

aceofspades
aceofspades

Reputation: 7586

Boostrap generates this using the CSS border:

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

Upvotes: 1

alvic
alvic

Reputation: 298

This works on bootsrap4 and ng-bootstrap. 

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

Upvotes: -2

Clyff
Clyff

Reputation: 4076

With css, you could just do that:

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

Upvotes: 149

bensmithbwd
bensmithbwd

Reputation: 343

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.

Upvotes: 5

Logan Franklin
Logan Franklin

Reputation: 71

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

Upvotes: 7

Related Questions