Increase width with CSS
You can use CSS to increase the width of your popover, like so:
/* The max width is dependant on the container (more info below) */
.popover{
max-width: 100%; /* Max Width of the popover (depending on the container!) */
}
If this doesn’t work, you probably want the solution below and alter your container element. (View the JSFiddle)
Twitter bootstrap Container
If that doesn’t work, you probably need to specify the container:
// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
container: 'body'
});
More Info
The popover is contained within the element that it is triggered in. In order to extend it “full width” – specify the container:
// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
container: 'body'
});
JSFiddle
View the JSFiddle to try it out.