title: Form inside a bootstrap 2.x popover
body: <p>How can I inline the form inside a pop over in bootstrap?</p>
  
  <p><b>Link: </b></p>
  
  <pre><code>&lt;a href="#" id="popover"&gt;&lt;i class="icon-plus-sign"&gt;&lt;/i&gt; Tab&lt;/a&gt;
  </code></pre>
  
  <p><b>JS: </b></p>
  
  <pre><code>$('#popover').popover({ 
      html : true,
      title: function() {
        return $("#popover-head").html();
      },
      content: function() {
        return $("#popover-content").html();
      }
  });
  </code></pre>
  
  <p><b>HTML:</b></p>
  
  <pre><code>&lt;div id="popover-head" class="hide"&gt;Add new tab&lt;/div&gt;
  &lt;div id="popover-content" class="hide"&gt;
    &lt;form class="form-inline"&gt;
      &lt;div class="form-group"&gt;
      &lt;!-- my form --&gt;
        &lt;input type="text" /&gt;
        &lt;button class="btn btn-primary" type="submit" &gt;
          &lt;i class="icon-white icon-ok"&gt;&lt;/i&gt;
        &lt;/button&gt;
        &lt;button class="btn" type="button" /&gt;
          &lt;i class="icon-remove"&gt;&lt;/i&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><b>Result:</b></p>
  
  <p><img src="https://i.stack.imgur.com/LxBZY.png" alt="enter image description here"></p>
  
  <p><b>UPDATE:</b></p>
  
  <p>As the comment below say, I think its about the <code>popover</code> size. I tried to modify it but it seems I'm lacking something:</p>
  
  <pre><code>.popover {
      max-width: 150px;
      width: auto;
  }
  </code></pre>
  
  <p>I also added the codes related to the popover for more clearer view to you guys.</p>