Adjusting the width of the popover



I am working on the tribute page. I am including the timeline in the page where user can click on a milestone and have the popover display additional information.

I got the popover to work. However when the popover appear the width is very narrow and so all the text are squished together into a tall slender popover. How do I adjust the CSS so that the WIDTH of the popover is wider?

Here is a link to my codepen

Thank you for your help.



Bootstrap defines a max width of 276px for the .popover class.

To make the popover wider, you’ll need to specify a different max-width, for example:

.popover {
  max-width: 100%;


@SkyC Thank you for the tip. That resolve my problem.

I want to learn to figure out the solution for myself in the future, how did you figure out that the max-width is the affecting property?
I was check the Computed CSS in the Chrome Developer Tools and see that the “width” for

is set to “auto” and there was no way to change that.


Glad that helped!

When I can’t modify a bootstrap component as I would expect, I look up how they build it in their CSS file:

If you open that file and search for “popover”, you’ll see all the settings they use, including this one: max-width: 276px;.