<!DOCTYPE html>
<
html
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
integrity
=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin
=
"anonymous"
>
<
script
src
=
integrity
=
"sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
>
<
div
class
=
"container text-center"
>
<
h1
class
=
"text-success"
>
GeeksforGeeks
</
h1
>
<
h2
>
Bootstrap 5 Modal Scrolling long content
</
h2
>
<
button
type
=
"button"
class
=
"btn btn-primary"
data-bs-toggle
=
"modal"
data-bs-target
=
"#GFG"
>
Click Me
</
button
>
<
div
class
=
"modal fade"
id
=
"GFG"
>
<
div
class="modal-dialog modal-lg
modal-dialog-scrollable ">
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-header"
>
<
h5
class
=
"modal-title"
id
=
"GFGLabel"
>
Modal Scrolling the modal body
</
h5
>
<
button
type
=
"button"
class
=
"btn-close"
data-bs-dismiss
=
"modal"
aria-label
=
"Close"
>
</
button
>
</
div
>
<
div
class
=
"modal-body"
>
<
img
src
=
width
=
"400px"
alt
=
"Java"
class
=
"d-block w-100"
>
<
br
><
br
>
<
img
src
=
height
=
"400px"
width
=
"400px"
alt
=
"HTML"
class
=
"d-block w-100"
>
<
br
><
br
>
<
img
src
=
height
=
"400px"
width
=
"400px"
alt
=
"Angular"
class
=
"d-block w-100"
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>