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

If you want to control the minimum width of your popover window, just add an extra line in the css (or extra css) like this:

.popover
{
    min-width: 200px ! important;
}

(replace 200px with the desired value)

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!)

Answer 3

...
width:auto;
...

was the perfect solution in my case. I had multiple popovers on the same page and one of them has a long URL. All of them looks nice now. Thank you JFK!

Answer 4

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 5

Some answer herein recommend just making the popover class a certain width. This is no good, because it affects all popovers. Use something like this instead, something more targeted:

.container-div .popover {
    /* add styles here */
}

Answer 6

Disable max-width in .popover:

.popover {
    max-width: none;
}

And then you can play with the size of the content more freely.