Twitter Bootstrap sideways caret

Question

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

Answer 1

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

Answer 2

I do it by adding a class that simply modifies the border styles to point the caret to the right. That way you can toggle a caret right/down by adding/removing the modifying class.

HTML:

<span class='caret caret-right'></span>

CSS:

.caret-right {
    border-left: 4px solid;
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
}

Answer 3

Another option for anyone using font awesome:

<i class="fa fa-caret-right" aria-hidden="true"></i>