Bootstrap popover width for popover-inner

Question

I would like the have a Bootstrap Popover be wider. I read that this should work:

.popover-inner a {
   width: 600px;
}

But, the browser c

Answer 1

1)Easy way :(warning:this will affect all popovers):

Just override the bootstrap .popover styles as below

.popover{
    max-width: 600px; 
}

2)Recommended way:

$("#a-div-id-001").popover({
    //set a custom container
    // which can minimize the displacement of popover
    //when window resizing
    container: $("#Div"),
    html : true,
    content: function() {
        return "<span>Hello there!</span>";
    },
    viewport: {
        selector: 'body',
        padding: 10
    },
    title:"Apps",
    template:'<div class="popover my-custom-class" role="tooltip">'
        +'<div class="arrow"></div><h3 class="popover-title"></h3>'
        +'<div class="popover-content"></div>'
        +'</div>'
});

First add a custom class to the popover template like above my-custom-class. Note that popover will be rendered in using the default template unless you had specified a custom template.

Then override bootstrap's .popover styles like below :

div.popover.my-custom-class{
    max-width: 600px;
}

This styles let you to have a dynamic width up to 600px. If you need to set a minimum width to the popover, just set the width option directly. see example below,

div.popover.my-custom-class{
    min-width: 600px;
}

When you increase the width, you may need to adjust the space (offset) between the popover box and the left/right page border. See the viewport property, as it sets the bounds.

Answer 2

Here's a sample initialization that I use.

    $(".property-price")
    .popover({ 
            trigger: "hover", 
            placement: 'bottom',
            toggle : "popover",
            content : "The from price is calculated ba....the dates selected.",
            title: "How is the from price calculated?",
            container: 'body',
            template: '<div class="popover popover-medium"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',
        });

As you can see, it uses a custom template. The template uses a custom popover-medium class.

I then have a CSS selector

.popover-medium {
    max-width: 350px;
}

You could also just set a style on the template class if you wanted.

Answer 3

.popover {
  max-width: 600px;
  width: auto;
}

change max-width to your desired value, You can also set min-width, if you wish

Answer 4

Add your popover content as HTML with your own class and then in CSS file add:

.popover .own-class { width: ... }

".own-class" element width will determine popover width.