Bootstrap 5 Offcanvas Usage Options are employed to manually regulate the off-canvas element’s display. Bootstrap 5 Offcanvas can be triggered using data attributes and JavaScript.
Bootstrap 5 Offcanvas Usage Options Attribute:
- data-bs-*: Options should be passed as data attributes in the off-canvas container.
Bootstrap 5 Offcanvas Usage Options: These are the option that is replaceable with * of data-bs-*.
- backdrop: This option is used to add a backdrop to the background when the offcanvas is open. The type is boolean and the default value is true.
- keyboard: It determines whether the escape key on the keyboard can close the offcanvas. The type is boolean and the default value is true.
- scroll: This option determines whether the background can be scrolled or not. The type is boolean and the default value is false.
Syntax:
<div class="offcanvas" data-bs-*=value> <!-- Offcanvas Content --!> </div>
Note: The * in the data-bs-* is replaced by the name of one of the options given above.
Example 1: This code example shows how to implement the backdrop and keyboard usage options:
<!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 >
|
Output:
Example 2: This code example shows how to implement the backdrop and scroll usage options together:
<!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 d-grid mb-4 p-4 w-50" >
< button class = "btn btn-success mb-3" type = "button"
data-bs-toggle = "offcanvas"
data-bs-target = "#offcanvasWithBothOptions" >
Open Offcanvas with body scrolling and backdrop
</ button >
< img src =
class = "w-100" alt = "" >
< p class = "font-weight-bold" >
Most popular course on DSA trusted by over
75,000 students! Built with years of experience
by industry experts the course gives
you a complete package of video
lectures, practice problems, quizzes,
discussion forums, and contests. Start Today!
</ 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
bg-light"
data-bs-dismiss = "offcanvas"
aria-label = "Close" >
</ button >
</ div >
< div class = "offcanvas-body" >
< p >
We can enable the background body scrolling
and the backdrop while the offcanvas is open
with the scroll usage option.
</ 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 >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#options