How to raise bootstrap button "over" a stretched link?

Question

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?

score 28 · Answer 1 · answered Dec 05 '19 at 13:56

28

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;
}

answered Dec 05 '19 at 13:56

kregus

1,003
10
18

Same solution works when using a `media` or `media-body` class, just be aware of the CSS selector – Drubio Apr 09 '21 at 09:42

score 6 · Accepted Answer · answered Aug 14 '19 at 19:38

6

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

.card .btn {
    z-index: 1;
}

answered Aug 14 '19 at 19:38

Terje Norderhaug

3,649
22
25

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 Aug 15 '19 at 12:40
Glad to be to help. The solution above worked for me in a similar case. – Terje Norderhaug Aug 17 '19 at 07:57

score 6 · Answer 3 · answered Jun 05 '20 at 22:15

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;

answered Jun 05 '20 at 22:15

Sabel

559
9
14

1

adding these styles to the link itself was all I needed to solve a similar problem. – orangecaterpillar Aug 08 '20 at 20:13

How to raise bootstrap button "over" a stretched link?

3 Answers3