Apply CSS to popover in Bootstrap

MLister picture MLister · Jul 26, 2013 · Viewed 93k times · Source

I want to apply custom CSS to the title and content of a popover in Bootstrap, however, it seems that my CSS is being ignored.

How can I apply specific CSS to the title and the content respectively?

For example: http://jsfiddle.net/Mx4Ez/

Answer

Matt Pinkston picture Matt Pinkston · Jul 26, 2013

The reason appears to be that the javascript is creating brand new elements to display the popover itself. These new elements have different css class names than the original.

Try adding this to your css:

.popover-title {
    color: blue;
    font-size: 15px;
}
.popover-content {
    color: red;
    font-size: 10px;
}

Update

Depending on the library version you're using, the names may be different. If the above does not work, try using .popover-header and .popover-body instead.