Changing bootstrap caret(color and position)

I want to change color of caret and make it not relative from input text, because it's hard to make it look good when it is.


There are two ways I have done this. If you want this to affect all carets on your site (probably not preferred) then you could override the caret css class in you:

.caret{border-top:4px solid red;}

Another option is to create a custom class and add it to the caret in your markup

.red{border-top:4px solid red;}

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action<span class="caret red"></span></button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>

The original JSFiddle has been updated

This works for Wordpress Bootstrap

// Caret color
.navbar .nav li.dropdown > .dropdown-toggle .caret {
    border-bottom-color: #FFFFFF;
    border-top-color: #FFFFFF;

Refer to this post: How do CSS triangles work?

For example, the standard "down" arrow provided by bootstrap uses the following style:

<span class="caret"></span>

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  border-left: 4px solid transparent;
  content: "";

Here I have just transposed the borders a bit, and now it is an "up" arrow. The same approach can be done for right and left carets.

<span class="up_caret"></span>

.up_caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-bottom: 4px solid #000000;
  border-left: 4px solid transparent;
  border-top: 0 dotted;
  border-right: 4px solid transparent;
  content: "";

Hope this helps!

Not the best way but it should work:

Add this to your stylesheet (CSS) after the Bootstrap include.

.btn-primary .caret, .btn-warning .caret, .btn-danger .caret, .btn-info .caret, .btn-success .caret, .btn-inverse .caret {

    border-top-color: red;

    filter: alpha(opacity=100);
    -khtml-opacity: 1;
    opacity: 1;

Found this simple solution to change the position of the caret.

//example of moving curser 20 pixels to the right
input { 
    padding-left: 20px;
    padding-right: -20px;

Another way to change color is to configure bootstrap as you like on:

For caret color change: Dropdowns -> @dropdown-caret-color

then go to the bottom of the site and click "Compile & Download" to get your custom bootstrap version.

But note @dropdown-caret-color is deprecated as of v3.1.0

If you want to only change the color of the caret itself, not the size or position, some simple CSS works fine (This is Bootstrap 3.3.6 and Wordpress 4.5.2):

a span.caret {
  color: #666

Need Your Help

Converting a date in MySQL from string field

mysql date

I'm using a system where the dates are stored as strings in the format dd/mm/yyyy. Is it possible to convert this to yyyy-mm-dd in a SELECT query (so that I can use DATE_FORMAT on it)? Does MySQL h...