<!-- Buttons -->                                    
    <a class="btn btn-primary py-2 px-3 fs--1" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
        Link with href
    </a>
    <button class="btn btn-primary py-2 px-3 fs--1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
        Button with data-bs-target
    </button>
        
    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
        <!-- Header -->
        <div class="offcanvas-header border-bottom border-gray-100">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
    
        <!-- Body -->
        <div class="offcanvas-body">
            <div>
                Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
            </div>
        </div>
    
        <!-- Footer -->
        <div class="offcanvas-footer border-top border-gray-100 py-3 px-5">
            <p class="fw-medium mb-0 text-center">Copyright @ 2022</p>
        </div>
    </div>
    

    <!-- Button --> 
    <button class="btn btn-warning py-2 px-3 fs--1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
                                            
    <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
        <!-- Header -->
        <div class="offcanvas-header border-bottom border-gray-100">
            <h5 class="offcanvas-title">Offcanvas body scrolling</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
    
        <!-- Body -->
        <div class="offcanvas-body">
            <div>
                Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
            </div>
        </div>
    </div>
    

    <!-- Button --> 
    <button class="btn btn-danger py-2 px-3 fs--1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Scroll & Backdrop</button>
                                            
    <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
        <!-- Header -->
        <div class="offcanvas-header border-bottom border-gray-100">
            <h5 class="offcanvas-title">Offcanvas body scrolling with backdrop</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        ----
        ----
    
    </div>
    

    <!-- Button --> 
    <button class="btn btn-orange text-white py-2 px-3 fs--1" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">Static Backdrop</button>
                                            
    <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
        <!-- Header -->
        <div class="offcanvas-header border-bottom border-gray-100">
            <h5 class="offcanvas-title">Offcanvas body scrolling with backdrop</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
    
        <!-- Body -->
        ----
        <!-- Footer -->
        ----
    </div>
    

    <!-- Left --> 
    <button class="btn btn-outline-success py-2 px-3 fs--1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft" aria-controls="offcanvasLeft">From Left</button>
    
    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasLeft" aria-labelledby="offcanvasLeftLabel">
        ...
    </div>
    
    <!-- Top --> 
    <button class="btn btn-outline-danger py-2 px-3 fs--1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">From Top</button>
    
    <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
        ...
    </div>
    
    <!-- Right --> 
    <button class="btn btn-outline-info py-2 px-3 fs--1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">From Right</button>
    
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
        ...
    </div>
    
    <!-- Bottom --> 
    <button class="btn btn-outline-orange py-2 px-3 fs--1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">From Bottom</button>
    
    <div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
        ...
    </div>