Twitter bootstrap caret size

Question

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.

Answer 1

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.

Answer 2

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.