Daniel Powell Daniel Powell - 1 year ago 244
CSS Question

Twitter Bootstrap sideways caret

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.

Answer Source

Just switch up the borders (see fiddle):


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


.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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download