<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
link
href
=
rel
=
"stylesheet"
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
h1
class
=
"m-4 text-success"
>
GeeksforGeeks
</
h1
>
<
h4
class
=
"ms-4"
>
Bootstrap 5 Offcanvas Usage Options
</
h4
>
<
div
class
=
"container mt-4 w-50"
>
<
button
class
=
"btn btn-success mb-3"
type
=
"button"
data-bs-toggle
=
"offcanvas"
data-bs-target
=
"#offcanvasScrolling"
aria-controls
=
"offcanvasScrolling"
>
Open Offcanvas without Backdrop and Keyboard utility
</
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.
</
p
>
</
div
>
<
div
class
=
"container d-grid mb-4 p-4 w-50"
>
<
button
class
=
"btn btn-success mb-3"
type
=
"button"
data-bs-toggle
=
"offcanvas"
.
data-bs-target
=
"#offcanvasWithBackdrop"
aria-controls
=
"offcanvasWithBackdrop"
>
Open Offcanvas with Backdrop
</
button
>
<
p
class
=
"font-weight-bold"
>
Bootstrap 5 is a free and open-source collection
of CSS and JavaScript/jQuery code used for
creating dynamic websites layout and web
applications. One of the most widely
used front-end frameworks, Bootstrap,
comes with a good collection of preset CSS codes.
</
p
>
<
br
>
</
div
>
<
div
class
=
"offcanvas offcanvas-start bg-dark text-light"
data-bs-backdrop
=
"false"
data-bs-keyboard
=
"false"
id
=
"offcanvasScrolling"
>
<
div
class
=
"offcanvas-header"
>
<
h5
class
=
"offcanvas-title"
id
=
"offcanvasScrollingLabel"
>
This is the offcanvas without
Backdrop and Keyboard utility
</
h5
>
<
button
type
=
"button"
class
=
"btn-close text-reset bg-light"
data-bs-dismiss
=
"offcanvas"
aria-label
=
"Close"
>
</
button
>
</
div
>
<
div
class
=
"offcanvas-body"
>
<
p
>We can disable the backdrop while the
offcanvas is open.</
p
>
<
br
>
<
div
class
=
"d-flex flex-column w-75 justify-center"
>
<
img
src
=
alt
=
""
>
<
button
type
=
"button"
class
=
"btn-success"
data-bs-dismiss
=
"offcanvas"
aria-label
=
"Close"
>
Close
</
button
>
</
div
>
</
div
>
</
div
>
<
div
class="offcanvas offcanvas-end bg-dark
text-light"
id
=
"offcanvasWithBackdrop"
>
<
div
class
=
"offcanvas-header"
>
<
h5
class
=
"offcanvas-title"
id
=
"offcanvasBackdropLabel"
>
This is the offcanvas with Backdrop
</
h5
>
<
button
type
=
"button"
class="btn-close text-reset
bg-light"
data-bs-dismiss
=
"offcanvas"
aria-label
=
"Close"
>
</
button
>
</
div
>
<
div
class
=
"offcanvas-body"
>
<
p
>This Offcanvas does have a Backdrop
but no Body-Scrolling.</
p
>
<
br
>
<
ul
class
=
"list-group"
>
<
li
class
=
"list-group-item"
>An item</
li
>
<
li
class
=
"list-group-item"
>A second item</
li
>
<
li
class
=
"list-group-item"
>A third item</
li
>
<
li
class
=
"list-group-item"
>A fourth item</
li
>
<
li
class
=
"list-group-item"
>And a fifth one</
li
>
<
li
class
=
"list-group-item"
>6th item</
li
>
<
li
class
=
"list-group-item"
>7th item</
li
>
<
li
class
=
"list-group-item"
>8th item</
li
>
<
li
class
=
"list-group-item"
>9th item</
li
>
<
li
class
=
"list-group-item"
>And the 10th item</
li
>
</
ul
>
</
div
>
</
div
>
</
body
>
</
html
>