Bootstrap 5 Offcanvas Backdrop

Last Updated : 31 Jan, 2023

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">GeeksforGeeks</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.geeksforgeeks.org/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.geeksforgeeks.org/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:

Bootstrap 5 Offcanvas Backdrop

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">GeeksforGeeks</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.geeksforgeeks.org/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.geeksforgeeks.org/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:

Bootstrap 5 Offcanvas Backdrop

Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#backdrop

Suggest improvement

Bootstrap 5 Offcanvas Usage Via Data Attributes

Bootstrap 5 Offcanvas Usage Methods

Share your thoughts in the comments

Accordion Component

Badges Component

Breadcrumb Component

Button group Component

Close button Component

Collapse Component

Offcanvas Component

Progress Component

Scrollspy Component

Spinners Component

Bootstrap 5 Offcanvas Backdrop

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?