<!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>