How can I remove the arrow from drop down list in Bootstrap CSS?

Question

I am trying to remove the arrow that appears on a drop down menu in Twitter Bootstrap framework. Has anyone figured a way of removing the arrows?

If you found your answer before it was posted, post it as an answer below and approve it to close this thread, that way it can help future users as well. — Andres I Perez, Apr 20 '12 at 11:35
@Andres,the think with memebers with less than 100 reps. they cant answer their own question before 8 hours are over.I have accepted an answer,thanks for the pointer. — Gandalf, Apr 20 '12 at 14:08

score 26 · Answer 1 · answered Jun 23 '12 at 23:15

26

Removing the caret class from the link removes the arrow from the navigation bar,

.dropdown-menu::before, 
.dropdown-menu::after {
    border: none;
    content: none;
}

Will remove the little tab from the drop down menu its self.

answered Jun 23 '12 at 23:15

Adam Patterson

651
5
11

2

I was force to add the `!important` flag to override the bootstrap settings. There's quite a few layers of specificity on the original declaration. – Lotus Mar 08 '13 at 18:15
You are not forced to add `!important`. Just make your rules more specific than the bootstrap ones. – A1rPun Jul 10 '19 at 14:24

score 22 · Accepted Answer · edited May 07 '19 at 06:08

22

From: https://getbootstrap.com/2.3.2/components.html#buttonDropdowns

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

If you remove <span class="caret"></span> the arrow is not shown.

Tried it using the dev. console in Chrome, and seems to work.

edited May 07 '19 at 06:08

chb

1,727
7
25
47

answered Apr 20 '12 at 11:00

Lasse Christiansen

10,205
7
50
79

@TahirAlvi Done. In the future, feel free to update links without notifying the author. – chb May 07 '19 at 04:35

score 4 · Answer 3 · answered Aug 30 '17 at 00:05

If you copy an existing Bootstrap dropdown example, the menu button tag looks something like this:

<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Name</button>

Removing the dropdown-toggle class removes the arrow (or caret):

<button class="btn btn-primary" type="button" data-toggle="dropdown">Menu Name</button>

score 3 · Answer 4 · answered Jan 21 '17 at 21:09

3

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

answered Jan 21 '17 at 21:09

Dina Fouda

41
3

score 2 · Answer 5 · edited Mar 19 '15 at 07:05

2

Just remove border-bottom from dropdown-menu will remove arrow from the navigation bar.

.navbar .nav > li > .dropdown-menu:before, .navbar .nav > li > .dropdown-menu:after{
    border-bottom: none;
}

edited Mar 19 '15 at 07:05

Suhaib Janjua

3,538
16
59
73

answered Mar 19 '15 at 05:46

Shalinee Tawar

31
2

score 1 · Answer 6 · answered Aug 22 '13 at 08:06

1

I've found the best solution is to add overflow:hidden; to .dropdown-menu

answered Aug 22 '13 at 08:06

Nicole Harris

850
1
13
24

I used this solution to prevent the caret from showing up in a side menu when the menu was collapsed against the side of the screen. +1 for a simple solution. – Caveman Jun 14 '16 at 20:14

score -1 · Answer 7 · edited Aug 02 '17 at 19:29

-1

add .dropdown-toggle-split class in the tag

edited Aug 02 '17 at 19:29

Petter Friberg

21,252
9
60
109

answered Aug 02 '17 at 19:20

Esteban

1

score -1 · Answer 8 · edited Feb 06 '18 at 09:35

-1

The only thing that worked for me was that I removed class="caret" if you are using bootstrap dropdown. Hope this work for you too.

edited Feb 06 '18 at 09:35

m00am

5,910
11
53
69

answered Feb 01 '18 at 17:37

omar malikzada

1
1

score -1 · Answer 9 · answered May 07 '19 at 04:13

-1

In Bootstrap4 remove "dropdown-toggle" class from "a" element.

answered May 07 '19 at 04:13

Aagii

43
1
5

How can I remove the arrow from drop down list in Bootstrap CSS?

9 Answers9

Linked