<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
/>
<
title
>
Why card images use data-src (not src)
for image in Bootstrap 4 ?
</
title
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin
=
"anonymous"
/>
<
script
src
=
integrity
=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin
=
"anonymous"
></
script
>
<
script
src
=
integrity
=
"sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin
=
"anonymous"
></
script
>
<
script
src
=
integrity
=
"sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin
=
"anonymous"
>
</
script
>
<
style
>
h1 {
color: green;
}
.second {
float: right;
margin: 20px;
}
.first {
float: left;
margin: 20px;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
>GeeksforGeeks</
h1
>
<
b
>A Computer Science Portal for Geeks</
b
>
</
center
>
<
div
class
=
"container"
>
<
div
class
=
"card first"
style
=
"width: 18rem;"
>
<
img
class
=
"card-img-top"
src
=
alt
=
"Card image cap"
/>
<
div
class
=
"card-body"
>
<
h5
class
=
"card-title"
>Courses</
h5
>
<
p
class
=
"card-text"
>
Attend the courses Increase
the probability
</
p
>
<
a
href
=
"#"
class
=
"btn btn-primary"
>Attend</
a
>
</
div
>
</
div
>
<
div
class
=
"card second"
style
=
"width: 18rem;"
>
<
img
id
=
"img1"
class
=
"card-img-top"
data-src
=
style
=
"height:295px;"
src
=
alt
=
"Card image cap"
/>
<
div
class
=
"card-body"
>
<
h5
class
=
"card-title"
>Interview</
h5
>
<
p
class
=
"card-text"
>
Prepare your self for the Interview
</
p
>
<
a
href
=
"#"
class
=
"btn btn-primary"
>Attend</
a
>
</
div
>
</
div
>
</
div
>
<
script
>
var ele = document.getElementById("img1");
// Switch the image to the URL
// specified in data-src
ele.src = ele.dataset.src;
</
script
>
</
body
>
</
html
>