25

I have a caret like this:

<a class="dropdown-toggle" data-toggle="dropdown" href="#mylist"
       style="display:inline-block;padding-left:0px;">
 <b class="caret"></b>
</a>

Is it possible to make this caret bigger with CSS or etc.

trante
  • 33,518
  • 47
  • 192
  • 272

4 Answers4

50

The caret is a css psuedo element and constructed using the borders of a transparent element. See the answer at - How is the caret on Twitter Bootstrap constructed? which gives a much better explanation and useful links.

To answer your question, you can create a new css class/overwrite .caret to increases the borders to your required size.

.caret {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #000000;
}

increase the px size to get the required size. Keep in mind that the three values should be the same if you want an equilateral triangle.

Community
  • 1
  • 1
Kami
  • 19,134
  • 4
  • 51
  • 63
  • 2
    +1 for the solution. Keep in mind that even though the three values are the same, the triangle is NOT equilateral ;) cheers – mgPePe Nov 21 '13 at 17:08
  • 1
    You are awesome! Just spent 20min trying to figure out font-size was not working because I was assuming it was a type of icon. :) – zazvorniki Aug 21 '14 at 19:42
  • 2
    If you're compiling your own Less in Bootstrap 3, look for `@caret-width-base` (and `@caret-width-large`) within variables.less. Change those values to increase (or decrease) caret size. – Soulriser Nov 19 '15 at 19:30
  • @Soulriser thanks, that is the correct solution. The other one breaks in certain components (dropup button, for example) – elsurudo Apr 26 '17 at 16:06
6

As I can't comment on the accepted answer, I would like to suggest tweaking that solution to use border-width to prevent global color styling of the caret, less code and includes automatic styling of the dropup caret.

.caret {
    border-width: 8px;
}

In case you need a different shaped caret, you can use left, right, top, bottom:

border-left-width: 8px;
border-right-width: 8px;
border-top-width: 10px;
border-bottom-width: 10px;

or

border-width: 10px 8px 10px 8px;

etc.

Dennis Poort
  • 154
  • 1
  • 7
1

For those looking for Bootstrap 4 Alpha 6 Support, you just have to change the selector to .dropdown-toggle::after and override what's coming from "_nav.scss" like so:

.dropdown-toggle::after {
    display: inline-block; /* Default */
    width: 0; /* Default */
    height: 0; /* Default */
    margin-left: .3em; /* Default */
    vertical-align: middle; /* Default */
    content: ""; /* Default */
    border-top: .6em solid; /* caret size */
    border-right: .6em solid transparent; /* caret size */
    border-left: .6em solid transparent; /* caret size */
}

Hope this helps those exploring Bootstrap 4 Alpha 6

ben.kaminski
  • 986
  • 3
  • 13
  • 24
0

If you want to style only 'one' caret ( or repetitive one kind) then you can use 'style' attribute to resize the caret. For eg:

<span class="caret" style="border-width:8px;"></span>

This will not affect other caret elements and only the tag containing this 'border-width' attribute will be affected!

Alternatively, if you want to keep the style in your css file you can label id attribute:

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

And add the styling in your .css as follows:

#c1{
    border-width:8px;
}
userAbhi
  • 695
  • 6
  • 10