Changing the width of twitter bootstrap popover

Question

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.

Solution 1

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/

Solution 2

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});
});

Solution 3

.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

Solution 4

You can adjust the width of the popover, but the best thing to do is to define the width of the content before Bootstrap sees is. For instance, I had a table, I defined it's width, then bootstrap built a popover to suit it. (Sometimes Bootstrap has trouble determining the width, and you need to step in and hold its hand)

Solution 5

Use this code . It will work fine:

  .popover{
       background-color:#b94a48;
       border:none;
       border-radius:unset;
       min-width:100px;
       width:100%;
       max-width:400px;
       overflow-wrap:break-word;
    }

View more solutions

Comments

[Orahmax]

You can change the max-width css property for .popover. stackoverflow.com/questions/15776487/…

[user3395822]

Thankyou this is a great answer. The wrap is great, but if I set the width on the container to '10000px' 'Vivamus sagittis lacus vel augue' is still on one line while 'laoreet rutrum faucibus' is on the second line

[Gavin]

Is this what you mean? jsfiddle.net/4FMmA/1 I actually don't see a difference with the 10000px width on the container element.

[user3395822]

Now each word is on a separate line for each fiddle? By setting the width of the wrap I was hoping everything would be on one line.

[Gavin]

Ok, I see what you mean, so you want to make the popover long enough to not wrap the text. Let me check it out and see what's happening.

[Gavin]

Bootstrap sets a max-width property in their CSS, so I just had to override this. This fixes it: jsfiddle.net/w5NdV

[WayBehind]

I tried 20 different versions and this one only works for me. Thanks!

[seanfitzg]

Good answer, worked for me. Though I found: "max-width: 600px; width: auto;" also worked.

[dading84]

Worked for me though did need to include !important to override the values set in bootstrap.