Bootstrap Popover Border CSS

Question

I want to increase the thickness of the Popover border using CSS. I managed to do it with this code, but it leaves the arrow with the old thin line. What is the CSS code to also increase the thickness of the Popover arrow so that it looks uniform?

.popover.bottom
  {
    border-top: 5px solid #000000;
    border-left: 5px solid #000000;
    border-right: 5px solid #000000;
    border-bottom: 5px solid #000000;
  }

Thanks

Answer 1

You need to change the border-width of .arrow.

.popover>.arrow {
    border-width: 16px;
}

This would require re-positioning of the :after pseudo element and the .arrow element though.

Something like this would work well:

EXAMPLE HERE

.popover.bottom>.arrow:after {
    top:7px;
    border-bottom-color: #f7f7f7;
}
.popover.bottom>.arrow {
    margin-left:-5px;
    border-bottom-color: #000;
    margin-top:-5px;
}

It's worth noting that you will need to change this positioning based on the position of the popover..

For instance, if you were styling .popover.right, (rather than .popover.bottom) you could use something like this:

EXAMPLE HERE

.popover.right>.arrow:after {
    left: 8px;
    bottom: -10px;
}
.popover.right>.arrow {
    left: -16px;
    margin-top: -12px;
    border-right-color: #000;
}
.popover>.arrow {
    border-width: 12px;
}