Upside down caret

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?

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

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>

This worked for me:

transform: rotate(180deg);

You can add add new css class for up arrow

<style>
 .caret-up{
    border-bottom: 10px solid #000000;
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    height: 0;
    vertical-align: top;
    width: 0;
  }

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

Demo http://jsfiddle.net/tbgXj/3/