Changing the width of Bootstrap popover

Solution 1:

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

Twitter Bootstrap popover increase width

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.

JSFiddle: http://jsfiddle.net/xp1369g4/

Solution 2:

I also needed a wider popover for a search text field. I came up with this Javascript solution (here in Coffee):

$(".product-search-trigger")
  .click(-> false) # cancel click on <a> tag
  .popover
    container: "body"
    html: true
    placement: "left"
    title: "<strong>Product search</strong> enter number or name"
  .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))

The workaround is in the last line. Before the popover is being displayed the max-width option is set to a custom value. You could also add a custom class to the tip element.

Solution 3:

I had the same problem. Spent quite some time searching for an answer and found my own solution: Add following text to the head:

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>