known known - 2 months ago 12
CSS Question

How can we change the color of arrow in the popover of bootstrap?

<div class=" affix popover right" id ="one" style="margin-left:8em;margin-top:10em; width:15em;background-color:rgba(228,19,47,0.9);padding:5px;border-radius:10px;">
<div class="arrow" style="margin-top:-45px;"></div>
<center style="padding:20px;"><b>this is the message</b></center>
</div>


This code creates the popover with a arrow how can we change the color of this arrow.

enter image description here

Answer

Use this css changing border-right color of psudo element:

.popover.right .arrow:after {
  border-right-color: red;
}

DEMO