How Is The Caret on Twitter Bootstrap Constructed

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

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

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.

Twitter Bootstrap sideways caret

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

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;

}

Twitter Bootstrap Dropdown menu creates extra carets in collapsed navbar

This is caused by the default styles of the Bootstrap navigation. The easiest way to remove it is to override the style which creates this by placing this CSS class somewhere in the CSS that you load after bootstrap CSS files.

.nav li.dropdown ul.dropdown-menu:before, .nav li.dropdown ul.dropdown-menu:after {
display: none;
}

Bootsrap Carets: Making sub carets and float them to the right?

To achieve the desired result, you should change your markup. <caret> div should before the text. Then you can give float right;

Working Demo

<b class="caret-right"></b>  
News - a very long title

CSS

.caret-right {
float:right;
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-left: 5px solid;
border-left-color:#999999;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
margin-top:5px;
margin-right:-8px;
}


Related Topics



Leave a reply



Submit