title: Bootstrap4 Cards, overlaying a button over the card image?
body: <p>I'm currently experimenting with Bootstrap4 and I have an issue with the images. Basically what I want to achieve is the following:</p>
  
  <p><a href="https://i.stack.imgur.com/3uYnY.png" rel="nofollow noreferrer">Bootstrap4 Card with top right button on image</a></p>
  
  <p>I want to overlay the "3-dot" button over the image in the top right. The button will act as a dropdown menu with a few options like edit, share etc... The code to make the card without the button is:</p>
  
  <pre><code>&lt;div class="card" style="width: 20rem;"&gt;
    &lt;img class="card-img-top" src="..." alt="Card image cap"&gt;
    &lt;div class="card-block"&gt;
      &lt;h4 class="card-title"&gt;Card title&lt;/h4&gt;
      &lt;p class="card-text"&gt;Some quick example text to build on the card 
  title and make up the bulk of the card's content.&lt;/p&gt;
      &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried enclosing the the card-img-top and a button with a div tag, but the image shifts out of bounds. Any tips on achieving this? Thanks!</p>