user3395822 user3395822 - 2 months ago 4x
CSS Question

Changing the width of twitter bootstrap popover

I am trying to change the width of twitter bootstrap popover using bootstrap 3:

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">


At the moment the content in the popover spreads over two lines. I want the popover content to stay on one line. Is this possible?

I am using C#, html and css.


You can change the popover's dimensions with CSS:


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 {

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: