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

15 Apr, 2020
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>
<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>
<!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>                    
<!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.
g_ragini
Bootstrap-4
Picked
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Tailwind CSS vs Bootstrap
How to set vertical alignment in Bootstrap ?
How to toggle password visibility in forms using Bootstrap-icons ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?