Newbe Dev Stack

Answer : Increase width with CSS You can use CSS to increase the width of your popover, like so: /* The max width is dependant on the container (more info below) */ .popover{ max-width: 100%; /* Max Width of the popover (depending on the container!) */ } If this doesn't work, you probably want the solution below and alter your container element. (View the JSFiddle) Twitter bootstrap Container If that doesn't work, you probably need to specify the container: // Contain the popover within the body NOT the element it was called in. $('[data-toggle="popover"]').popover({ container: 'body' }); More Info The popover is contained within the element that it is triggered in. In order to extend it "full width" - specify the container: // Contain the popover within the body NOT the element it was called in. $('[data-toggle="popover"]').popover({ container: 'body' }); JSFiddle View the JSFiddle to ...

Answer : You can customize the placement of the popover or it's arrow my manipulating the .popover CSS once the popover is shown. For example, this pushes the top of the popover down 22 pixels.. $('[data-toggle=popover]').on('shown.bs.popover', function () { $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px') }) Working demo : http://bootply.com/88325 I recommend using the placement method rather than the shown.bs.popover event. This will not trigger a popover jump when the element is shown. This is how it works: $('[data-toggle=popover]').popover({ placement: function(context, source) { var self = this; setTimeout(function() { self.$arrow.css('top', 55); self.$tip.css('top', -45); }, 0); return 'right'; }, }); My use case is that the popover placement is top and I have to remove the arrow. I followed the solution provide...

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...