CODEWITHSUNDEEP
twitter-bootstrap
Gandalf
Gandalf

Reputation: 13683

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

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?

Upvotes: 13

Views: 47555

Answers (10)

Nani
Nani

Reputation: 1

Use dropdown-bs-toggle instead of dropdown-toggle

Upvotes: 0

Lasse Christiansen
Lasse Christiansen

Reputation: 10325

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.

Upvotes: 23

Aagii
Aagii

Reputation: 53

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

Upvotes: -1

omar malikzada
omar malikzada

Reputation: 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.

Upvotes: -1

Happy Hippo
Happy Hippo

Reputation: 102

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>

Upvotes: 4

Esteban
Esteban

Reputation: 1

add .dropdown-toggle-split class in the tag

Upvotes: -1

Dina Fouda
Dina Fouda

Reputation: 41

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

Upvotes: 3

Shalinee Tawar
Shalinee Tawar

Reputation: 31

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

Upvotes: 2

Nicole Harris
Nicole Harris

Reputation: 860

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

Upvotes: 1

Adam Patterson
Adam Patterson

Reputation: 689

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.

Upvotes: 26

Related Questions