14

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>

card example

I'd like to make it so the button is clickable without the stretched link covering it.

Any tips?

4 Answers 4

31

I had to set z-index to a value > 1, and had to set position: relative; on the element to make it clickable on top of the stretched-link.

In your case, that means:

.card .btn {
   z-index: 2;
   position: relative;
}
1
  • Same solution works when using a media or media-body class, just be aware of the CSS selector
    – Drubio
    Commented Apr 9, 2021 at 9:42
6

Setting the button to have the same z-index as the stretched-link will make the button clickable:

.card .btn {
    z-index: 1;
}
2
  • 1
    Thanks! This didn't quite solve my issue, but it got me on the road to a solution. I found that setting the z-index of the button like this didn't work, but if I instead put the button in a div and set the z-index of that div, it worked. It seems the z-index needs to be higher than 1 though. Setting it to 5000 worked 😊
    – Spielo
    Commented Aug 15, 2019 at 12:40
  • Glad to be to help. The solution above worked for me in a similar case. Commented Aug 17, 2019 at 7:57
6

Put a <div> around the button or link that is nested in a stretched link. then give that div the following:

z-index:3;
position:relative;
1
  • 1
    adding these styles to the link itself was all I needed to solve a similar problem. Commented Aug 8, 2020 at 20:13
0

Add class="stretched-link" to button class as well. The code will be as following.

<div class="col-auto align-self-center">
      <a class="btn btn-primary stretched-link" href="https://www.stackoverflow.com" role="button">Button Link</a>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.