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
Vertical Alignment Based on X-Height
How to Inspect CSS Pseudo Classes with Firebug
Chrome Developer Tools Style Tab Showing Faded CSS Definition, Why
How to Remove The Bold from a Headline
Detecting Printed Page Size with CSS Media Queries
CSS Inverted Triangle Image Overlay
Applying Comic Sans Ms Font Style
Keeping CSS Out of Js in Angular 2/Angular-Cli
How to Apply CSS to a MAC Chrome Select Box
How to Break Long Words in a Table Td
Does The Shadow Dom Replace: :Before and: :After
Checkboxes Not Displaying Chrome - Work in Other Browsers
Changes Made to (Static) CSS File Not Reflecting in Django Development Server
Positioning a Mapbox/Leaflet Map Inside a Container Div
Change Font Sizes with Style Sheets for Rstudio Presentation