How to use links on card-img-overlay class in Bootstrap 4 ?

When we put any link inside of a bootstrap card it performs well until we used card-img-overlay to put an image as a background of that card.

Bootstrap Card: A card in BootStrap 4 is a flexible and extensible content container. It includes options for headers, footers, content, colors, links etc.
Card Image Overlays: card-img-overlay is used to set the image as background image of the card and add text over the image.
Syntax: For card overlay
```
<div class="card">
 <img src="..."/>
 <div class="card-img-overlay">
  <p class="text">....</p>
 </div>
</div>
```

Approach: All the links placed inside class card-img-overlay works but links placed outside this class do not work. To make these links work, set the position of these links ‘relative’.

CSS Code: Place this inside the <style> tag.

.card-link 
    { 
    position:relative; 
    }

Below example illustrates the approach:

Example 1: This example illustrates card card-img-overlay, in the 1st card we are not using the card-img-overlay but when we use the card-img-overlay the links are not working even text is not responding as a text. It totally behaves likes a picture.

Program:

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <title>Bootstrap Card</title> 

    <meta charset="utf-8"> 

    <meta name="viewport" 

          content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet"

          href= 

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 

    <script src= 

"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 

    </script> 

    <script src= 

"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 

    </script> 

    <script src= 

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 

    </script> 

    <style> 

        .card { 

            width: 250px; 

            height: 300px; 

            border: 2px solid black; 

            padding: 5px; 

        } 

        h1 { 

            color: green; 

            text-align: center; 

        } 

        img { 

            height: 120px; 

        } 

        .left { 

            float: left; 

        } 

        .right { 

            float: right; 

        } 

        .container { 

            margin-top: 50px; 

            width: 600px; 

            height: auto; 

        } 

    </style> 

</head> 

<body> 

    <div class="container"> 

        <h1>GeeksforGeeks</h1> 

        <div class="card left"> 

            <img class="card-img-top" src= 

"https://media.geeksforgeeks.org/wp-content/uploads/20200109151258/672.png" /> 

            <div class="card-inverse"> 

                <h3 class="text-stroke">GeeksforGeeks</h3> 

            </div> 

            <div class="card-block"> 

                <a href="#" class="card-link">Card link</a> 

                <p class="card-text">A Computer Science Portal</p> 

            </div> 

            <div class="card-footer"> 

                <small class="text-muted">Card link is working</small> 

            </div> 

        </div> 

        <div class="card right"> 

            <img class="card-img-top" src= 

"https://media.geeksforgeeks.org/wp-content/uploads/20200109151258/672.png" /> 

            <div class="card-img-overlay card-inverse"> 

                <h3 class="text-stroke">GeeksforGeeks</h3> 

            </div> 

            <div class="card-block"> 

                <a href="#" class="card-link">Card link</a> 

                <p class="card-text">A Computer Science Portal</p> 

            </div> 

            <div class="card-footer"> 

                <small class="text-muted">Card link is not working</small> 

            </div> 

        </div> 

    </div> 

</body> 

</html>

Output:

Example 2: This example illustrates card card-img-overlay, in the 1st card we are not using the card-img-overlay but when we use the card-img-overlay the links are working and text are also behaving as text.

Program:

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <title>Bootstrap Card</title> 

    <meta charset="utf-8"> 

    <meta name="viewport"

        content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet"

        href= 

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 

    <script src= 

"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 

    </script> 

    <script src= 

"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> 

    </script> 

    <script src= 

"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 

    </script> 

    <style> 

       .card-link{ 

         position:relative; 

        } 

        .card { 

            width: 250px; 

            height: 300px; 

            border: 2px solid black; 

            padding: 5px; 

        } 

        h1 { 

            color: green; 

            text-align: center; 

        } 

        img { 

            height: 120px; 

        } 

        .left { 

            float: left; 

        } 

        .right { 

            float: right; 

        } 

        .container { 

            margin-top: 50px; 

            width: 600px; 

            height: auto; 

        } 

    </style> 

</head> 

<body> 

    <div class="container"> 

        <h1>GeeksforGeeks</h1> 

        <div class="card left"> 

            <img class="card-img-top" src= 

"https://media.geeksforgeeks.org/wp-content/uploads/20200109151258/672.png" /> 

            <div class="card-inverse"> 

                <h3 class="text-stroke">GeeksforGeeks</h3> 

            </div> 

            <div class="card-block"> 

                <a href="#" class="card-link">Card link</a> 

                <p class="card-text">A Computer Science Portal</p> 

            </div> 

            <div class="card-footer"> 

                <small class="text-muted">Card link is working</small> 

            </div> 

        </div> 

        <div class="card right"> 

            <img class="card-img-top" src= 

"https://media.geeksforgeeks.org/wp-content/uploads/20200109151258/672.png" /> 

            <div class="card-img-overlay card-inverse"> 

                <h3 class="text-stroke">GeeksforGeeks</h3> 

                <div class="card-block"> 

                    <a href="#" class="card-link text-white" >Card link</a> 

                    <p class="card-text">A Computer Science Portal</p> 

                </div> 

            </div> 

            <a href="#" class="card-link " >Card link</a> 

            <div class="card-footer"> 

                <small>Card link is  working</small> 

            </div> 

        </div> 

    </div> 

</body> 

</html>

Output:

Note: In the second example the muted text not behaving like text because it is out of the card-link div.

Article Tags :

Bootstrap

Web Technologies

Bootstrap-4