<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
integrity
=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin
=
"anonymous"
>
<
script
src
=
integrity
=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
>
<
div
class
=
"text-center"
>
<
h1
class
=
"text-success"
>
GeeksforGeeks
</
h1
>
<
strong
>Bootstrap 5 Modal Components</
strong
>
<
div
class
=
"container"
>
<
button
class
=
"btn btn-success mb-3"
type
=
"button"
data-bs-toggle
=
"offcanvas"
data-bs-target
=
"#offcanvasWithBothOptions"
>
Offcanvas with body scrolling and backdrop
<
br
>
</
button
>
<
p
>
Bootstrap 5 Offcanvas is a sidebar
component that enables Javascript
to swap the view so that it may be
seen from the top, bottom, or left
edge of the viewport. The button,
which is declared with the particular
element, may be used as the trigger
to switch the view, and the data
attribute can be used to use it to
call JavaScript. It is comparable
to the Bootstrap Modal in thatonly
one off-canvas element may be shown
at once. Offcanvas functionality may
be used to navigate the entire page.
</
p
>
</
div
>
<
div
class="offcanvas offcanvas-start
bg-dark text-light"
data-bs-scroll
=
"true"
id
=
"offcanvasWithBothOptions"
>
<
div
class
=
"offcanvas-header"
>
<
h5
class
=
"offcanvas-title"
id
=
"offcanvasScrollingLabel"
>
This is the offcanvas with body
scrolling and backdrop
</
h5
>
<
button
type
=
"button"
class
=
"btn-close text-reset"
data-bs-dismiss
=
"offcanvas"
aria-label
=
"Close"
>
</
button
>
</
div
>
<
div
class
=
"offcanvas-body"
>
<
img
src
=
alt
=
""
>
<
button
type
=
"button"
class
=
"btn-success"
data-bs-dismiss
=
"offcanvas"
aria-label
=
"Close"
>
Close
</
button
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>