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 console still shows auto with the above code. Hard to describe. Here is a snapshot:

Answer 1

Based off of what I have in my bootstrap.css file, the default is a max-width property.

I use this

.popover {   position: absolute;   top: 0;   left: 0;   z-index: 1010;   display: none;   max-width: 600px;   padding: 1px;   text-align: left;   white-space: normal;   background-color: #ffffff;   border: 1px solid #ccc;   border: 1px solid rgba(0, 0, 0, 0.2);   -webkit-border-radius: 6px;      -moz-border-radius: 6px;           border-radius: 6px;   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);      -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);   -webkit-background-clip: padding-box;      -moz-background-clip: padding;           background-clip: padding-box; } 

and it works exactly how you intended it to.

My bootstrap.css files does not contain a popover-inner a css selector at all though

Answer 2

There's a pull request on bootstrap to make this easier, but you can modify it using this technique of setting the template option for the popover:

$('#yourPopover').popover({   template: '<div class="popover special-class"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' }) 

Then you can set your popover special-class css however you like (widths and more!)