Bootstrap 5 Offcanvas Backdrop
Bootstrap 5 Offcanvas Backdrop is the greyish translucent cover that is all over the background which is shown when the off-canvas opens. There are three settings in which we can use an offcanvas, the default one is the offcanvas with the backdrop and no body scrolling. The two others are the one with the body scrolling and no backdrop and the one with both body scrolling and backdrop. For the second setting, we have to add data-bs-scroll=”true” data-bs-backdrop=”false” attributes in the offcanvas , and for the last one, we have to add the data-bs-scroll=”true” attribute in the offcanvas.
Bootstrap 5 Offcanvas Backdrop Attributes:
- data-bs-scroll: This attribute need to be “true” to make both with the body scrolling and no backdrop and one with both body scrolling and backdrop.
- data-bs-backdrop: This attribute needs to be “true” to make the one with both body scrolling and backdrop. This attribute needs to be “false” for the offcanvas with the body scrolling and no backdrop. toggle the backdrop.
Syntax:
<div class="offcanvas offcanvas-start" data-bs-backdrop="true" id="..."> <div class="offcanvas-header"> <h1 class="offcanvas-title"> ... </h1> <button type="button" class="btn-close"> </button> </div> <div class="offcanvas-body"> <p>...</p> </div> </div>
Example 1: The example below demonstrates the default offcanvas with backdrop without body scrolling and the offcanvas with body scrolling:
HTML
<!doctype html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < h1 class = "m-4 text-success" >w3wiki</ h1 > < h4 class = "ms-4" >Bootstrap 5 Offcanvas backdrop</ 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 = "https://media.w3wiki.net/img-practice/banner/dsa-self-paced-thumbnail.png?v=19363" 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 = "https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200x200-min.png" alt = "" > < button type = "button" class = "btn-success" data-bs-dismiss = "offcanvas" aria-label = "Close" > Close </ button > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: The example below demonstrates the off-canvas with both body scrolling and backdrop.
HTML
<!doctype html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < h1 class = "m-4 text-success" >w3wiki</ h1 > < h4 class = "ms-4" >Bootstrap 5 Offcanvas backdrop</ 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 = "https://media.w3wiki.net/img-practice/banner/dsa-self-paced-thumbnail.png?v=19363" 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 = "https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200x200-min.png" 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/#backdrop
Contact Us