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

Question

  <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.

Answer 1

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

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

#DEMO

Answer 2

In Bootstrap 4,

.bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after {     border-top-color: yellow; // Any color here }