CODEWITHSUNDEEP
csstwitter-bootstrappopover
d1596
d1596

Reputation: 1307

How can I change the color of Bootstrap popover arrows?

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 Here is what styling is being applied in the DOM

Upvotes: 5

Views: 3370

Answers (3)

Martin_W
Martin_W

Reputation: 1797

For Bootstrap 5.1, I had to use the following to get a blue background (change to your preferred color):

    <style type="text/css">
        .popover {
            background: blue;
        }

        .popover.bs-popover-top .popover-arrow:after {
            border-top-color: blue;
        }

        .popover.bs-popover-end .popover-arrow:after {
            border-right-color: blue;
        }

        .popover.bs-popover-bottom .popover-arrow:after {
            border-bottom-color: blue;
        }

        .popover.bs-popover-start .popover-arrow:after {
            border-left-color: blue;
        }
    </style>

Upvotes: 0

Alvindera97
Alvindera97

Reputation: 406

For Bootstrap 5, use this:

.popover .popover-arrow::before, .popover .popover-arrow::after {
    border-color: #FFA500 !important;  /* this example changes the arrow to orange color... You can always replace with any color you choose. */
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

Please note that at time off writing, bootstrap 5 is in alpha stage. This may or may not work with stable versions of bootstrap 5. I however doubt that anything much about the source code would change from this point onward. • So this should be pretty much standard for the stable release of Bootstrap 5.

You can save the above code in a separate css file (say custom.css) and link it into your HTML file within the <head></head> section... Hope this helps someone out there.

Upvotes: 7

troyw1636
troyw1636

Reputation: 348

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;
}

Upvotes: 4

Related Questions