Twitter bootstrap caret size

Question

I have a caret like this:

Answer 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

Answer 2

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 3

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

Answer 4

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.