I'd like to put some content in a Bootstrap 4 card with a stretched link over it. I'd also like to include a button in this card which has a URL different to the stretched link.
Bootstrap's documentation says:
Multiple links and tap targets are not recommended with stretched links. However, some position and z-index styles can help should this be required.
But I can't get it to work.
I've tried things like setting the z-index of the button to 5000, but it's still not clickable.
<div class="card">
<div class="card-body">
<div class="row">
<div class="col align-self-center">
<h5 class="card-title">This is a card</h5>
<h6 class="card-subtitle mb-2 text-muted">It has a button in it</h6>
<p class="card-text">How do I make the button rise up above the stretched link?</p>
</div>
<div class="col-auto align-self-center">
<a class="btn btn-primary" href="https://www.stackoverflow.com" role="button">Button Link</a>
</div>
<a href="https://www.duckduckgo.com" class="stretched-link"></a>
</div>
</div>
</div>
I'd like to make it so the button is clickable without the stretched link covering it.
Any tips?