adding the arrow to dropdown pills for twitter bootstrap?

Question

I got the twitter bootstrap dropdown buttons successfully working, but I have a tiny problem. The black navbar here:

http://twitter.github.com/bootstrap/javascript.html#dropdowns

It has a neat little arrow when the dropdown opens, right? Well, I'm using the pills right below and they don't have that arrow. It seems the arrow is only included when using the navbar, which I don't need.

Has anyone figured out a way to add the arrows to the pills? :(

Answer 1

Assuming you're referring to the white arrow that points upward when a menu item is clicked, the style you're looking for is on line 3907 in bootstrap.css:

.navbar .dropdown-menu::after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  border-left: 6px solid transparent;
  content: '';
}

You can try copying this style and removing the .navbar portion of the style declaration and modify it to fit your code.

Answer 2

Here's a refinement to Jason Towne's answer.

This works correctly if the menu has been pulled to the right.

.dropdown-menu-arrow::before {
    border-bottom: 7px solid rgba(0, 0, 0, 0.2);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
    display: inline-block;
    left: 9px;
    position: absolute;
    top: -7px;
}

.dropdown-menu-arrow::after {
    border-bottom: 6px solid #FFFFFF;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    display: inline-block;
    left: 10px;
    position: absolute;
    top: -6px;
}

.btn-group.pull-right > .dropdown-menu-arrow::before {
    left: inherit;
    right: 9px;
}

.btn-group.pull-right > .dropdown-menu-arrow::after {
    left: inherit;
    right: 10px;
}

Here's an example of usage.

<div class="btn-group pull-right">
    <a href="#" data-toggle="dropdown" class="btn dropdown-toggle">
    Actions
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu dropdown-menu-arrow">
        <li>...</li>
    </ul>
</div>

Answer 3

Not sure what the pills are, but if you have bootstrap you add the arrows by simply putting this anywhere in your code.

<b class="caret"></b>

Is that what you meant?