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.
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=
<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>
|
- 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=
<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>
|
- Output:
Note: In the second example the muted text not behaving like text because it is out of the card-link div.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
15 Apr, 2020
Like Article
Save Article