How to style Popover Twitter Bootstrap

Question

I have 4-5 different popovers . How to set own styles for each popover. If Each Popover has different width? Is it possible ? All of popovers have the class .popover when I set for example width: 200px. All of them become 200px .I am not sure how to give them different width or height any ideas please

Answer 1

You can achieve customisation of popovers by adding an additional class to the elements you want styled differently, e.g.:

<div class="popover">
  Normal popover
</div>
<div class="popover popover-wide">
  Wide popover
</div>
<div class="popover popover-extra-wide">
  This is a very wide popover
</div>

Then you can create CSS styles which provide those attributes. It's worth spending some time looking at CSS specificity, so you have a good understanding of which CSS rules will win-out.

The rules we want for this example are to only be applied when popover AND popover-wide are present, which we achieve by joining them with a .:

.popover.popover-wide {
  width: 250px;
}

.popover.popover-extra-wide {
  width: 400px;
}

You could achieve the same effect using IDs, but it's better form to use classes because they're reusable (id attributes need to be unique in the document). It's also good form to choose useful names for the classes which describe what they're used for, so you might choose to call them popover-intrusive or popover-subtle, but that's nice and subjective :)