Bootstrap 5 Offcanvas components are the different parts that merge to create an offcanvas sidebar. The components which constitute an offcanvas are a header with a close button and a body section which is optional and we can also add some action buttons on the footer section which are optional too.
Bootstrap 5 Offcanvas components used Classes:
- offcanvas-start: This class is added to signify the start of the offcanvas.
- offcanvas-header: This class is added to signify the header of the offcanvas.
- offcanvas-title: This class is added to signify the title inside the header of the offcanvas.
- offcanvas-body: This class is added to signify the content body of the offcanvas.
Syntax:
<div class="offcanvas" id="..."> <div class="offcanvas-header"> <h1 class="offcanvas-title"> ... </h1> </div> <div class="offcanvas-body"> ... </div> </div>
Example 1: The code below demonstrates how we can use all the components to create a basic Offcanvas Sidebar:
<!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 >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >Bootstrap 5 Modal Components</ strong >
< div class = "container d-flex" >
< button class = "btn btn-success" type = "button" data-bs-toggle = "offcanvas" data-bs-target = "#offcanvas" >
Open Offcanvas - < br > Which is the
left placed offcanvas
</ button >
</ div >
< div class = "offcanvas offcanvas-start" id = "offcanvas" >
< 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" >
< 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 >
|
Output:
Example 2: The example below demonstrates how we can use the components to implement the offcanvas with both body scrolling and backdrop.
<!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 >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#offcanvas-components