Menu
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?
587
An upside-down circumflex is called a caron, or a háček. It has an HTML entity in the TADS Latin-2 extension to HTML: ˇ and looks like this: ˇ which unfortunately doesn't display in the same size/proportion as the ^ caret.
To type the down arrow symbol anywhere on your PC or laptop keyboard (like in Microsoft Word or Excel), simply press down the Alt key and type 25 using the numeric keypad on the right side of your keyboard.
Surrogate symbol for superscript and exponentiation In mathematics, the caret can signify exponentiation ( 3^5 for 35), where the usual superscript is not readily usable (as on some graphing calculators). It is also used to indicate a superscript in TeX typesetting.
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
162
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
