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