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
>w3wiki</
h1
>
<
div
class
=
"card left"
>
<
img
class
=
"card-img-top"
src
=
"https://media.w3wiki.net/wp-content/uploads/20200109151258/672.png"
/>
<
div
class
=
"card-inverse"
>
<
h3
class
=
"text-stroke"
>w3wiki</
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.w3wiki.net/wp-content/uploads/20200109151258/672.png"
/>
<
div
class
=
"card-img-overlay card-inverse"
>
<
h3
class
=
"text-stroke"
>w3wiki</
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
>w3wiki</
h1
>
<
div
class
=
"card left"
>
<
img
class
=
"card-img-top"
src
=
"https://media.w3wiki.net/wp-content/uploads/20200109151258/672.png"
/>
<
div
class
=
"card-inverse"
>
<
h3
class
=
"text-stroke"
>w3wiki</
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.w3wiki.net/wp-content/uploads/20200109151258/672.png"
/>
<
div
class
=
"card-img-overlay card-inverse"
>
<
h3
class
=
"text-stroke"
>w3wiki</
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.
Contact Us