title: Bootstrap: Adding button over a picture
body: <p>Currently, I have the following code to display my pictures.</p>
  
  <pre><code>&lt;section id="gallery" class="row no-gutters"&gt;
    {% for image in images %}
      &lt;a class="col-12 col-sm-6 col-lg-3" href="{{ image.image.url }}"&gt;
        &lt;img src="{% get_image image.image.url 'event_gallery_medium' %}" class="w-100"&gt;
      &lt;/a&gt;
    {% endfor %}
  &lt;/section&gt;
  </code></pre>
  
  <p>I now try to add a button in the bottom right corner, where people can also click on it. The button should open <code>{{ image.image.url }}</code>.</p>
  
  <p>I created the button:</p>
  
  <pre><code>&lt;span class="d-md-none btn btn-sm btn-white"&gt;
    &lt;span class="fas fa-expand mr-2"&gt;&lt;/span&gt;
    View Photos
  &lt;/span&gt;
  </code></pre>
  
  <p>But I still struggle how to place it "over" the picture so it's in the bottom right corner.</p>