Changing The Width Of Twitter Bootstrap Popover

Answer :

You can change the popover's dimensions with CSS:

.popover{     width:200px;     height:250px;     } 

But that CSS will change ALL popovers. What you need to do is put the button in a container element and use CSS like this:

#containerElem .popover {   width:200px;   height:250px;   max-width:none; // Required for popovers wider than 276px (Bootstrap's max-width for popovers) } 

You also need to change data-container="#containerElem" to match your container.

NOTE: If your popover is going to have a width greater than 276px, you need to override the max-width property as well. So add max-width: none to the .popover {} class.

Here's a jsFiddle: http://jsfiddle.net/4FMmA/

If you want to controle the width in javascript:

HTML (example from Bootstrap)

<button id="exampleButton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">   Popover on top</button> 

Javascript:

We set the max-width when show.bs.popover event is triggered:

var p = $("#exampleButton").popover(); p.on("show.bs.popover", function(e){     p.data("bs.popover").tip().css({"max-width": "500px"}); }); 

http://jsfiddle.net/ctoesca/u3kSk

---

• You can also add a data-max-width attribute on the button element and get the value in the trigger function:

p.on("show.bs.popover", function(e){     var w = $(this).attr("data-max-width");     p.data("bs.popover").tip().css({"max-width": w}); }); 

.popover{     max-width: 100%;     width: <width>; } 

The 'max-width' sets max-width of popover to the width of the page. You can then set the width as you like