Upside down caret

Question

HTML

 <span class="caret"></span>  

Gives me a caret arrow ▼, but I want to have a caret that looks like ▲.

Is there any class for this available in Bootstrap? If not, how to achieve this?

Answer 1

There is a built in bootstrap class that you can attach to the parent element of the caret class

<span class="dropup">     <span class="caret"></span> </span> 

It works in both bootstrap 2 and 3

Answer 2

Let's assume that you want to reverse the caret using the class caret-reversed, so that you keep the existing implementation of the caret class.

The CSS would be the following.

<span class="caret caret-reversed"></span>   .caret.caret-reversed {     border-top-width: 0;     border-bottom: 4px solid #000000; } 

It works both for bootstrap 2 and 3.

Update: Since Bootstrap 3.3.2 the .glyphicon-triangle-top and .glyphicon-triangle-bottom glyphicons are available that can work as alternatives to .caret and its reversed version.

Normal

<span class="glyphicon glyphicon-triangle-bottom"></span> 

Reversed

<span class="glyphicon glyphicon-triangle-top"></span>