<!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
class
=
"m-2"
>
<
h1
class
=
"text-success"
>
GeeksforGeeks
</
h1
>
<
h4
class
=
"ms-4"
>Bootstrap 5 Offcanvas Placement</
h4
>
<
div
class
=
"container d-flex mb-4 p-4"
>
<
button
class
=
"btn btn-success m-3"
type
=
"button"
data-bs-toggle
=
"offcanvas"
data-bs-target
=
"#offcanvasLeft"
>
Open Default Offcanvas -
<
br
> Which is the left placed offcanvas
</
button
>
<
button
class
=
"btn btn-success m-3"
type
=
"button"
data-bs-toggle
=
"offcanvas"
data-bs-target
=
"#offcanvasRight"
>
Open Right Offcanvas -
<
br
> Which is the right placed offcanvas
</
button
>
</
div
>
<
div
class
=
"offcanvas offcanvas-start"
id
=
"offcanvasLeft"
>
<
div
class
=
"offcanvas-header"
>
<
h5
class
=
"offcanvas-title"
>
This is the Default offcanvas
</
h5
>
<
button
type
=
"button"
class
=
"btn-close text-reset"
data-bs-dismiss
=
"offcanvas"
aria-label
=
"Close"
>
</
button
>
</
div
>
<
div
class
=
"offcanvas-body"
>
<
p
>This Offcanvas has the default
placement which is left.</
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
>
</
ul
>
</
div
>
</
div
>
<
div
class="offcanvas offcanvas-end bg-dark
text-light"
id
=
"offcanvasRight"
>
<
div
class
=
"offcanvas-header"
>
<
h5
class
=
"offcanvas-title"
>
This is the Right offcanvas
</
h5
>
<
button
type
=
"button"
class
=
"btn-close text-reset"
data-bs-dismiss
=
"offcanvas"
aria-label
=
"Close"
>
</
button
>
</
div
>
<
div
class
=
"offcanvas-body"
>
<
p
>This Offcanvas has the Right placement.</
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
>
</
ul
>
</
div
>
</
div
>
</
body
>
</
html
>