CODEWITHSUNDEEP
cssbootstrap-4
Jesus Gomez
Jesus Gomez

Reputation: 1520

Bootstrap 4: popover color

How do you fix the arrow color on bootstrap 4 popover?

enter image description here

This is my CSS:

.popover {
    background-color: #212121;
    color: $transparent_white;
}

this is my HTML:

<div class="popover bs-tether-element show bs-tether-element-attached-top bs-tether-element-attached-center bs-tether-target-attached-bottom bs-tether-target-attached-center" style="top: 0px; left: 0px; position: absolute; transform: translateX(243px) translateY(294px) translateZ(0px);">
    <div data-reactroot="" class="popover-inner">
        <div class="component-rate-popover popover-content">
        </div>
    </div>
</div>

Upvotes: 1

Views: 3050

Answers (2)

Reid
Reid

Reputation: 711

If you want to use Sass (.SCSS), this works:

.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after {
        border-bottom-color: #212121;
}

Upvotes: 0

LXhelili
LXhelili

Reputation: 980

Try this way.

.popover.popover-bottom::after, 
.popover.bs-tether-element-attached-top::after{ border-bottom-color:#212121; }

Upvotes: 2

Related Questions