Twitter Bootstrap Caret Size

Twitter bootstrap caret size

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.

How is the caret on Twitter Bootstrap constructed?

It is only with borders. When you see arrows like this, the developer most likely used pseudo elements to create them. Basically what happens is you create a transparent box without content, and since there is nothing there, all you see is the one corner of the border. This conveniently looks just like an arrow.

How to do it:

.foo:before {
    content: ' ';
      height: 0;
      position: absolute;
      width: 0;
      border: 10px solid transparent;
      border-left-color: #333;
}

http://jsfiddle.net/fGSZx/

Here are some resources to help:

CSS Triangle from CSS-Tricks (this should clear everything up)

Smashing Mag article about :before and :after

Boostrap dropdown-menu header width and caret

Add the caret before the text, and float it right.

<b class="caret pull-right">This is my test heading

Updated Fiddle

Bootstrap 5: Change caret height of input fields (form-control)

You could make it higher or lower by adjusting padding or line-height to the input field.

input {
    padding: 3px 5px;
}

or

input {
    line-height: 25px;
}

How to change the caret icon in selectize.js?

I have figured it out. I changed the following css classes inside (selectize.bootstrap3.css) file that render the icon:

.selectize-control.single .selectize-input:after {
        content: '\e259'; /*This will draw the icon*/
        font-family: "Glyphicons Halflings";
        line-height: 2;
        display: block;
        position: absolute;
        top: -5px;
        right: 0;
        background-color: white;
        padding-right: 2px;
           }

    .selectize-control.single .selectize-input.dropdown-active:after {
        content: '\e260';
        font-family: "Glyphicons Halflings";
        background-color: white;
        padding-right: 2px;

    }

Change caret icon

It depends on what you want to change it to, but currently the caret comes from this CSS which gives it zero size but applies a border to mimic the down arrow:

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

You could change it to a green square for example:

.bootstrap-select.btn-group .dropdown-toggle .caret {
  width: 10px;
  height: 10px;
  border: none;
  background-color: green;
}

Demonstration fiddle: http://jsfiddle.net/pvT8Q/460/

Or you could use the Bootstrap Glyphicons:

.bootstrap-select.btn-group .dropdown-toggle .caret {
  width: 10px;
  height: 10px;
  border: none;
  font-family: 'Glyphicons Halflings';
}

.bootstrap-select.btn-group .dropdown-toggle .caret:before {
  content: "\e003";
}

Demonstration fiddle: http://jsfiddle.net/pvT8Q/461/
(I leave the positioning up to you)

---

Related Topics