title: Align popover to bottom left
body: <p>How could I make the popover bottom div do not go beyond the popover button right side, like in the image:
  <img src="https://i.stack.imgur.com/7XrAS.png" alt="enter image description here"></p>
  
  <p>Here's my code.<br><br></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;a href="#" tabindex="0" class="btn btn" role="button" data-toggle="popover" data-trigger="focus" data-content="&lt;input&gt;"&gt;
      Search
  &lt;/a&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>$('[data-toggle="popover"]').popover({
                       trigger: 'manual',
                       placement: 'bottom',
                       html: true
                    }).click(function (e) {
                       e.preventDefault();
                       $(this).popover('show');
                    });
  </code></pre>
  
  <p><strong>Bootply:</strong><br>
  <a href="http://www.bootply.com/3SLzUgPyrV">http://www.bootply.com/3SLzUgPyrV</a></p>