title: Changing the width of Bootstrap popover
body: <p>I am designing a page using Bootstrap 3. I am trying to use a popover with <code>placement: right</code> on an input element. The new Bootstrap ensures that if you use <code>form-control</code> you basically have a full-width input element.</p>
  
  <p>The HTML code looks something like this: </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;label for="name"&gt;Name:&lt;/label&gt;
          &lt;input id="name" class="form-control" type="text" 
                           data-toggle="popover" data-trigger="hover" 
                           data-content="My popover content.My popover content.My popover content.My popover content." /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The popovers width is too low, in my opinion because their isn't any width left in the div.
  I want the input form on the left side, and a wide popover on the right side.</p>
  
  <p>Mostly, I'm looking for a solution where I don't have to override Bootstrap. </p>
  
  <p>The attached JsFiddle. The second input option. Haven't used jsfiddle a lot so don't know, but try increasing the size of the output box to see results, on smaller screens wouldn't even see it.
  <a href="http://jsfiddle.net/Rqx8T/" rel="noreferrer">http://jsfiddle.net/Rqx8T/</a></p>