Changing the Width of Bootstrap Popover

Changing the width of Bootstrap popover

<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

Basically i put the popover code in the row div, instead of the input div. Solved the problem.

Changing the width of twitter bootstrap popover

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/

How to change the width of bootstrap popover

You want to change the container that is used with the popover.

This can be done via through Javsascript where you initialize the container of the popover on your specified element.

// where 'body' is the container you want to contain the popover within
$('[data-toggle="popover"]').popover({
container: 'body' });

Increase the width of the popover

About your code and your problem, the problem is you are trying to edit an element whithout the correct selector (.popover). And when you try to edit the correct selector it has an max-width property. So it doesn't work. But is enough with

   .popover {
     max-width: 500px;
   }

That is all.

But I try your plnkr and find you are using modals classes in the code. That is a mistake. Because it's not the grammar or use of the css. So I add new css classes:

.popover-content > .header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5; 
}
 .popover-content > .body {
  padding: 20px;
}

And change the popover.html to:

<div class="header">
   <b>How is this amount calculated?</b>
</div>
<div class="body">
  <h4>PQ * A% * CR AVG </h4>
  <br />
  PQ - Pre-Qualified based on your historical data <br />
  A% - Approval percentage <br />
  CR AVG - (Historical Credits Earned) / (Total Certificates)
</div>
http://angular-ui.github.io/bootstrap/

You can check my plnkr fork:https://plnkr.co/edit/p4dr2XMzQqw8R6RYOsMo?p=preview

set width of bootstrap popover not working

Please include the css .popover {max-width: 100% !important;}.Once popover on image it will add popover class to desired places. so you need to override the max-width value.

$('[data-toggle=popover]').popover({      container: 'body',      html: true,      content: function () {        return $('#popover-content').html();      }    });

.popover {        max-width: 100% !important;    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">    
    <a href="#" class="mytooltip" data-toggle="popover" data-container="#wrap" data-trigger="hover" data-placement="auto right">      <img src="http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/sea-gull-100219122.jpg" alt="?" style="width:20px;height:20px;border:0">    </a>
    <div id="popover-content" class="hide" style="width: 800px; max-width: 100%;">        <table style="width: 400px;">      <thead>       <tr>        <th>heading 1</th>        <th>

heading 2</th>        <th>heading 3</th>        <th>heading 4</th>       </tr>            </thead>         <tbody>       <tr>        <td>Content row 1 col 1</td>        <td>Content row 1 col 2</td>        <td>Content row 1 col 3</td>        <td>Content row 1 col 4</td>       </tr>      </tbody>     </table>    </div>

UI Bootstrap Popover: change width

You can achieve it by overriding popover-content class:

.popover-content {
width: 200px;
}

UPDATE:
You can check this in Chrome:
- press F12
- select the magnifier
- click on the element to inspect
- modify its style
Sample Image

Bootstrap popover width for popover-inner

Based off of what I have in my bootstrap.css file, the default is a max-width property.

I use this

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  max-width: 600px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

and it works exactly how you intended it to.

My bootstrap.css files does not contain a popover-inner a css selector at all though

Cannot set width of bootstrap popover in angular project

Finally I have solved this issue.
I just moved the css code from component.css file into styles.css file.
I don't have any idea why it doesn't work in the component css.

.popover { max-width: 100% !important;}

Change the width of popover angularjs

it worked add !important in my CSS

.popover {
    width: 500px !important;
    max-width:500px !important;
}

Changing the Width of Bootstrap Popover