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 "Hello there!";
    },
    viewport: {
        selector: 'body',
        padding: 10
    },
    title:"Apps",
    template:'
'
        +'
'
        +'
'
        +'
'
});

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.