Twitter Bootstrap sideways caret

css, twitter-bootstrap

Solution

Just switch up the borders (see fiddle):

HTML

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

CSS

.caret-right {
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid;
    display: inline-block;
    height: 0;
    opacity: 0.3;
    vertical-align: top;
    width: 0;
}

Problem

I'm using Twitter Bootstrap and some custom css (found here) to have dropdown menus open up on mouseover. I am using the "caret" on a on the root menu items to show the user there is more options available, I would like to use a sideways version of this for the sub menus, in that example they use a -> image however I don't think it really fits in with the rest of the UI. I've also tried the play icon twitter has but it doesn't quite match either.

Original source

Related problems