<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>
Bootstrap Offcanvas
</
title
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
">
<
link
href
=
rel
=
"stylesheet"
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"container mt-3"
>
<
button
class
=
"btn btn-primary"
type
=
"button"
data-bs-toggle
=
"offcanvas"
data-bs-target
=
"#offcanvasStart"
aria-controls
=
"offcanvasStart"
>
Toggle left offcanvas
</
button
>
<
div
class
=
"offcanvas offcanvas-start"
tabindex
=
"-1"
id
=
"offcanvasStart"
aria-labelledby
=
"offcanvasStartLabel"
>
<
div
class
=
"offcanvas-header"
>
<
h3
id
=
"offcanvasStartLabel"
>
Offcanvas left
</
h3
>
<
button
type
=
"button"
class
=
"btn-close text-reset"
data-bs-dismiss
=
"offcanvas"
aria-label
=
"Close"
>
</
button
>
</
div
>
<
div
class
=
"offcanvas-body"
>
<
h5
>
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
</
h5
>
</
div
>
</
div
>
<
button
class
=
"btn btn-primary"
type
=
"button"
data-bs-toggle
=
"offcanvas"
data-bs-target
=
"#offcanvasRight"
aria-controls
=
"offcanvasRight"
>
Toggle right offcanvas
</
button
>
<
div
class
=
"offcanvas offcanvas-end"
tabindex
=
"-1"
id
=
"offcanvasRight"
aria-labelledby
=
"offcanvasRightLabel"
>
<
div
class
=
"offcanvas-header"
>
<
h3
id
=
"offcanvasRightLabel"
>
Offcanvas right
</
h3
>
<
button
type
=
"button"
class
=
"btn-close text-reset"
data-bs-dismiss
=
"offcanvas"
aria-label
=
"Close"
>
</
button
>
</
div
>
<
div
class
=
"offcanvas-body"
>
<
h5
>
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
</
h5
>
</
div
>
</
div
>
<
button
class
=
"btn btn-primary"
type
=
"button"
data-bs-toggle
=
"offcanvas"
data-bs-target
=
"#offcanvasTop"
aria-controls
=
"offcanvasTop"
>
Toggle top offcanvas
</
button
>
<
div
class
=
"offcanvas offcanvas-top"
tabindex
=
"-1"
id
=
"offcanvasTop"
aria-labelledby
=
"offcanvasTopLabel"
>
<
div
class
=
"offcanvas-header"
>
<
h3
id
=
"offcanvasTopLabel"
>
Offcanvas top
</
h3
>
<
button
type
=
"button"
class
=
"btn-close text-reset"
data-bs-dismiss
=
"offcanvas"
aria-label
=
"Close"
>
</
button
>
</
div
>
<
div
class
=
"offcanvas-body"
>
<
h5
>
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
</
h5
>
</
div
>
</
div
>
<
button
class
=
"btn btn-primary"
type
=
"button"
data-bs-toggle
=
"offcanvas"
data-bs-target
=
"#offcanvasBottom"
aria-controls
=
"offcanvasBottom"
>
Toggle bottom offcanvas
</
button
>
<
div
class
=
"offcanvas offcanvas-bottom"
tabindex
=
"-1"
id
=
"offcanvasBottom"
aria-labelledby
=
"offcanvasBottomLabel"
>
<
div
class
=
"offcanvas-header"
>
<
h3
class
=
"offcanvas-title"
id
=
"offcanvasBottomLabel"
>
Offcanvas bottom
</
h3
>
<
button
type
=
"button"
class
=
"btn-close text-reset"
data-bs-dismiss
=
"offcanvas"
aria-label
=
"Close"
>
</
button
>
</
div
>
<
div
class
=
"offcanvas-body small"
>
<
h5
>
Bootstrap is the most popular CSS
Framework for developing responsive
and mobile-first websites.
</
h5
>
</
div
>
</
div
>
<
br
>
<
center
>
<
h3
>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</
h3
>
<
h4
>
A computer science portal for geeks.
</
h4
>
<
h3
>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</
h3
>
<
h4
>
A computer science portal for geeks.
</
h4
>
<
h3
>
Welcome to GeeksforGeeks
Welcome to GeeksforGeeks
</
h3
>
</
center
>
</
div
>
</
body
>
</
html
>