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?

Cyanine

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

Ledbetter

I wish they simplify it to <span class="caret caret-dropup"></span> – Tatman

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>

Edwinedwina

Use of embedded "dropup" class (as mentioned by Ron below) seems preferred – Retired

Sure, using something already provided by the framework is generally preferred, but in this case one has to use 2 span elements instead of one, and that could bloat the HTML code. – Edwinedwina

@TasosK., <span class="caret caret-reversed"></span> css: border:Xpx solid transparent; border-bottom:Xpx solid black; x for whatever value.. – Gynandrous

This is very useful when you want to just toggle the caret class – Typebar

the only downside to this answer is the css coloring, I think – Amiamiable

Answer 3

This worked for me:

transform: rotate(180deg);

Patriarchate

Answer 4

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/

Salangi

Answer 5

You can do something like this:

in HTML:

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

in CSS:

.caret-reversed{
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

Phyla

Answer 6

Bit late to the party but this is all one needs to do for an upside down caret:

.menu-item-has-children > .sub-menu > .menu-item-has-children::after {
    content: "\005E";
    transform: rotateX(180deg);
    <!-- and any other styles u want -->
}

Apolitical

Answer 7

Just had this problem and the best solution for me was to edit the styling for bootstrap original so I get the one I needed.

So for everyone that use bootstrap one here is the opposite:

.caret-up {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-bottom: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

Amortizement

Answer 8

Toggle the caret class

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

.caret.caret-reversed {
    border: 5px solid transparent;
    border-bottom: 5px solid #000000;
}

Maje