How can I change the color of Bootstrap popover arrows?

Question

I've tried a few solutions found online when trying to change the color of my popover arrow. Here is my CSS which is in a self-created popover.css file (other css in here works fine).

popover.bottom .arrow::after {
    border-bottom-color: black !important;
}

Here is what styling is being applied in the DOM

Answer 1

Not sure what version of bootstrap you're using, but it looks like your selector isn't quite right. This works for me on version 4.0 (based on example here: https://getbootstrap.com/docs/4.0/components/popovers/):

.arrow::after, .bs-popover-bottom .arrow::after {
    border-bottom-color: black !important;
}