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 the user there is more options available, I would like to use a sideways version of this for the sub menus, in that example they use a -> image however I don't think it really fits in with the rest of the UI.

I've also tried the play icon twitter has but it doesn't quite match either.

score 75 · Accepted Answer · edited Jun 19 '14 at 22:37

75

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

edited Jun 19 '14 at 22:37

mlunoe

4,422
4
32
43

answered May 25 '12 at 01:27

ScottS

71,703
13
126
146

Ben Thielker · Answer 2 · 2014-06-27T16:41:08.073

9

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

edited Jun 27 '14 at 16:41

answered Jun 27 '14 at 16:29

Ben Thielker

4,104
4
21
20

score 8 · Answer 3 · answered Dec 20 '13 at 13:45

8

Use the bootstrap (3.0) Glyphicons

<span class="glyphicon glyphicon-chevron-up"></span> <!-- UP -->
<span class="glyphicon glyphicon-chevron-down"></span> <!-- DOWN-->

answered Dec 20 '13 at 13:45

user2661940

101
1
2

score 5 · Answer 4 · answered Jan 20 '14 at 13:02

As user2661940 said you can use glyphicons for Bootstrap 3 or you can also make your own class for every side. For example

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

bbc_danang · Answer 5 · 2014-09-10T05:15:02.753

I use these styles to do that (it works without bootstrap as well)

HTML:

<span class="caret up"></span>
<span class="caret right"></span>
<span class="caret down"></span>
<span class="caret left"></span>

CSS:

.caret {
    border: 5px solid transparent;
    display: inline-block;
    width: 0;
    height: 0;
    opacity: 0.5;
    vertical-align: top;
}
.caret.up {
    border-bottom: 5px solid;
}
.caret.right {
    border-left: 5px solid;
}
.caret.down {
    border-top: 5px solid;
}
.caret.left {
    border-right: 5px solid;
}

score 5 · Answer 6 · answered Aug 10 '16 at 02:17

5

Another option for anyone using font awesome:

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

answered Aug 10 '16 at 02:17

mahi-man

4,326
2
25
36

score 4 · Answer 7 · answered Oct 04 '15 at 23:59

I added a rotation class to the span

HTML:

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

CSS:

.rotate270 {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

You can obviously create other angle classes as desired.

score 3 · Answer 8 · answered Jan 07 '13 at 14:39

3

you can use simple code:

HTML

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

CSS:

.caret{
border-color:#ffffff transparent transparent transparent;
border-width:4px;
border-style:solid;
content: ""
display:inline-block;
}

answered Jan 07 '13 at 14:39

Shahzab Asif

481
5
13

score 0 · Answer 9 · answered May 25 '16 at 19:05

Just add the css to rotate the caret on mouse hover

.navbar-nav>li>.dropdown-menu{
    display:block;
    visibility:hidden;

}
.navbar-nav>li:hover>.dropdown-menu{
    visibility:visible;
}
.navbar-default .navbar-nav>li:hover>a .caret{
    transform:rotate(-90deg);
    transition:all 0.3s ease-in-out;
}

Twitter Bootstrap sideways caret

9 Answers9

Linked