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.

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

score 298 · Accepted Answer · edited Jun 30 '21 at 07:08

298

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>

edited Jun 30 '21 at 07:08

Amal K

4,359
2
22
44

answered Jun 15 '17 at 21:44

İlter Kağan Öcal

3,530
1
17
10

3

For some reason, the other solutions weren't working for me. I'm running Bootstrap 4. This was the only thing that worked. – anonymoose Dec 27 '17 at 00:47
12

This didn't quite work for me. The right side of the button is no longer rounded. – Jace Browning Jan 12 '18 at 01:49
Simpler than writing custom CSS with `!important` :) – hughjdavey Aug 13 '18 at 12:11
2

I tested this and it works pretty well! Tested in FF, Chrome, IE and Opera - even on mobile android devices with build-in browser no annoying arrow - thanks alot sir! NOTICE: don't remove the complete "dropdown-toggle" attribute, just remove the "-toggle" attribute, so your styling for the dropdownmenu don't get rid. So "dropdown-toggle" turns to "dropdown" - hope this helps. – Kerim Yagmurcu Mar 04 '19 at 19:46
This one is working for v5 very nicely. Thanks. – Sohan Arafat Sep 20 '21 at 00:35

score 147 · Answer 2 · edited May 27 '18 at 07:23

147

With css, you could just do that:

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

edited May 27 '18 at 07:23

rybo111

12,240
4
61
70

answered Jul 25 '16 at 20:11

Clyff

4,046
2
17
32

12

I also had to include `!important` to get this custom CSS to take effect. – Jace Browning Jan 12 '18 at 01:48
1

This will impact every dropdown used in other pages if you are using the same CSS. – Pavan Nath May 14 '19 at 07:38
1

add some more prefix to only disable arrow for button, eg: .btn.btn-outline-secondary.dropdown-toggle::after { display:none !important; } – puppylpg Dec 23 '19 at 08:31

rybo111 · Answer 3 · 2021-07-13T07:19:59.103

74

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.

edited Jul 13 '21 at 07:19

answered May 27 '18 at 07:42

rybo111

12,240
4
61
70

6

Best answer, I'd just add some extra info for other people, like this class should be added along with `dropdown-toggle`. – eestein Aug 07 '19 at 13:16
1

this is a very helpful answer - tried the `no-arrow` option, didn't help. – CybeX Sep 04 '20 at 02:24
2

Great answer. In my case, I needed to add `!important`. Eg: `display: none !important;`. – Tran Anh Minh Oct 18 '20 at 22:52
1

This is the best answer compared to the others. – enchance Jul 13 '21 at 01:58
1

@TranAnhMinh maybe that's because you're including your custom CSS before Bootstrap? – rybo111 Jul 13 '21 at 07:26
!important needed for bootstrap 4.6 – Usama Apr 18 '22 at 02:46
!important is bad practice... CSS is supposed to treat the last entry as the winner (as the one to be applied) to our website. I tried above method with Bootstrap 4 and Bootstrap 5 and it works fine. – Daniel Wu Oct 28 '22 at 04:58
1

For anyone that needs an override, this is the right approach. – Luyang Du Nov 17 '22 at 17:00

score 26 · Answer 4 · edited Jul 28 '21 at 04:10

26

remove the dropdown-toggle class

edited Jul 28 '21 at 04:10

Jochem

3,295
4
30
55

answered Feb 01 '18 at 11:34

Abdullah Alkurdi

378
1
5
11

8

That's more like a comment – mrun Feb 01 '18 at 12:00
3

That is what [the accepted answer](https://stackoverflow.com/a/44577512/1364007) said six months before this one: "*Simply remove "dropdown-toggle" class from the element.*" – Wai Ha Lee Jul 27 '21 at 07:46

score 9 · Answer 5 · answered Nov 10 '20 at 13:44

9

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

You can also try this

answered Nov 10 '20 at 13:44

Epsi Vennila

190
3
9

This was so helpful. It solved my whole issue! Thanks. – MUHINDO Aug 08 '22 at 22:07

score 7 · Answer 6 · answered Apr 07 '17 at 16:27

7

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

answered Apr 07 '17 at 16:27

Logan Franklin

71
1
1

score 5 · Answer 7 · answered Dec 10 '17 at 01:45

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.

score 4 · Answer 8 · answered Nov 23 '18 at 17:31

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>

score 1 · Answer 9 · answered Jun 25 '18 at 01:37

1

Boostrap generates this using the CSS border:

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

answered Jun 25 '18 at 01:37

aceofspades

7,568
1
35
48

score 1 · Answer 10 · answered Oct 02 '19 at 16:15

1

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

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

answered Oct 02 '19 at 16:15

S. zbr

31
2

score 0 · Answer 11 · answered Apr 07 '20 at 03:51

0

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

answered Apr 07 '20 at 03:51

jerryurenaa

3,863
1
27
17

score -1 · Answer 12 · answered Oct 19 '19 at 20:25

-1

Add no-arrow to drop-down toggle class declaration

answered Oct 19 '19 at 20:25

Carl Leiner

1

score -2 · Answer 13 · answered Jun 04 '18 at 01:15

-2

This works on bootsrap4 and ng-bootstrap.

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

answered Jun 04 '18 at 01:15

alvic

288
2
5

4

Copying the two year old accepted answer, but with a typo. – miken32 Aug 08 '18 at 18:02

How to remove the arrow in dropdown in Bootstrap 4?

13 Answers13

Linked