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.">
$('#popover').popover(options)
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:
.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/