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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </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=
                <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=
                <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>

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </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=
                <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=
                <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>                    

    chevron_right

    
    

  • Output:

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




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : g_ragini