<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Bootstrap Example</
title
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin
=
"anonymous"
>
<
script
src
=
integrity
=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin
=
"anonymous"
>
</
script
>
<
style
>
article {
margin: 15px;
}
h1 {
color: green;
}
.carousel-inner {
height: 310px;
}
.item.active {
height: 310px!important;
}
.item img {
object-fit: cover;
height: 100%!important;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"container-fluid"
>
<
div
id
=
"carousel1"
class
=
"carousel slide carousel-fade"
data-ride
=
"carousel"
style
=
"height:50vh"
>
<
ol
class
=
"carousel-indicators"
>
<
li
data-target
=
"#carousel1"
data-slide-to
=
"0"
class
=
"active"
></
li
>
<
li
data-target
=
"#carousel1"
data-slide-to
=
"1"
></
li
>
<
li
data-target
=
"#carousel1"
data-slide-to
=
"2"
></
li
>
</
ol
>
<
div
class
=
"carousel-inner"
role
=
"listbox"
>
<
div
class
=
"carousel-item active"
>
<
div
class
=
"view"
>
<
img
src
=
alt
=
"First slide"
>
<
div
class
=
"mask rgba-black-light"
></
div
>
</
div
>
</
div
>
<
div
class
=
"carousel-item"
>
<
div
class
=
"view"
>
<
img
src
=
alt
=
"Second slide"
>
<
div
class
=
"mask rgba-black-strong"
></
div
>
</
div
>
</
div
>
<
div
class
=
"carousel-item"
>
<
div
class
=
"view"
>
<
img
src
=
alt
=
"Third slide"
>
<
div
class
=
"mask rgba-black-slight"
></
div
>
</
div
>
</
div
>
</
div
>
<
a
class
=
"carousel-control-prev"
href
=
"#carousel1"
role
=
"button"
data-slide
=
"prev"
>
<
span
class
=
"carousel-control-prev-icon"
aria-hidden
=
"true"
></
span
>
<
span
class
=
"sr-only"
>Previous</
span
>
</
a
>
<
a
class
=
"carousel-control-next"
href
=
"#carousel1"
role
=
"button"
data-slide
=
"next"
>
<
span
class
=
"carousel-control-next-icon"
aria-hidden
=
"true"
></
span
>
<
span
class
=
"sr-only"
>Next</
span
>
</
a
>
</
div
>
</
div
>
<
article
>
<
h1
>GeekesforGeeks</
h1
>
<
b
>A Computer Science Portal for Geeks</
b
>
</
article
>
</
body
>
</
html
>