<div class="button-list">
                                                                    <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
                                                                        لینک با href
                                                                    </a>
                                                                    <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"> 
                                                                        دکمه با data-bs-target
                                                                    </button>
                                                                </div>
                
                
                                                                <!-- offcanvas پیش‌فرض -->
                                                                <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
                                                                    <div class="offcanvas-header">
                                                                        <h5 class="offcanvas-title mt-0" id="offcanvasExampleLabel">Offcanvas</h5>
                                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="بستن"></button>
                                                                    </div>
                                                                    <div class="offcanvas-body">
                                                                        <p>
                                                                            برخی متن به عنوان جایگزین. در زندگی واقعی شما می‌توانید عناصری که انتخاب کرده‌اید را داشته باشید. مانند، متن، تصاویر، لیست‌ها و غیره.
                                                                        </p>
                                                                        <div class="dropdown mt-3">
                                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="scrollingDropdownMenuButton" data-bs-toggle="dropdown">
                                                                                دکمه کشویی
                                                                            </button>
                                                                            <ul class="dropdown-menu" aria-labelledby="scrollingDropdownMenuButton">
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات دیگر</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>                                                         
                                                            
                                                        

                                                            
                                                                <div class="button-list">
                                                                    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">فعال کردن اسکرول بدنه</button>
                                                                    <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">فعال کردن بک‌دراپ (پیش‌فرض)</button>
                                                                    <button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">فعال کردن هم اسکرول و هم بک‌دراپ</button>
                                                                </div>
                
                                                                <!-- offcanvas با اسکرول -->
                                                                <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
                                                                    <div class="offcanvas-header">
                                                                        <h5 class="offcanvas-title mt-0" id="offcanvasScrollingLabel">رنگی با اسکرول</h5>
                                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="بستن"></button>
                                                                    </div>
                                                                    <div class="offcanvas-body">
                                                                        <p>
                                                                            برخی متن به عنوان جایگزین. در زندگی واقعی شما می‌توانید عناصری که انتخاب کرده‌اید را داشته باشید. مانند، متن، تصاویر، لیست‌ها و غیره.
                                                                        </p>
                                                                        <div class="dropdown mt-3">
                                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="scrollingDropdownMenuButton" data-bs-toggle="dropdown">
                                                                                دکمه کشویی
                                                                            </button>
                                                                            <ul class="dropdown-menu" aria-labelledby="scrollingDropdownMenuButton">
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات دیگر</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                
                                                                <!-- offcanvas با بک‌دراپ -->
                                                                <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
                                                                    <div class="offcanvas-header">
                                                                        <h5 class="offcanvas-title mt-0" id="offcanvasWithBackdropLabel">Offcanvas با بک‌دراپ</h5>
                                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="بستن"></button>
                                                                    </div>
                                                                    <div class="offcanvas-body">
                                                                        <p>
                                                                            برخی متن به عنوان جایگزین. در زندگی واقعی شما می‌توانید عناصری که انتخاب کرده‌اید را داشته باشید. مانند، متن، تصاویر، لیست‌ها و غیره.
                                                                        </p>
                                                                        <div class="dropdown mt-3">
                                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="backdropDropdownMenuButton" data-bs-toggle="dropdown">
                                                                                دکمه کشویی
                                                                            </button>
                                                                            <ul class="dropdown-menu" aria-labelledby="backdropDropdownMenuButton">
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات دیگر</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                
                                                                <!-- offcanvas با اسکرول و بک‌دراپ -->
                                                                <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
                                                                    <div class="offcanvas-header">
                                                                        <h5 class="offcanvas-title mt-0" id="offcanvasWithBothOptionsLabel">بک‌دراپ با اسکرول</h5>
                                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="بستن"></button>
                                                                    </div>
                                                                    <div class="offcanvas-body">
                                                                        <p>
                                                                            برخی متن به عنوان جایگزین. در زندگی واقعی شما می‌توانید عناصری که انتخاب کرده‌اید را داشته باشید. مانند، متن، تصاویر، لیست‌ها و غیره.
                                                                        </p>
                                                                        <div class="dropdown mt-3">
                                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="scrollingBackdropDropdownMenuButton" data-bs-toggle="dropdown">
                                                                                دکمه کشویی
                                                                            </button>
                                                                            <ul class="dropdown-menu" aria-labelledby="scrollingBackdropDropdownMenuButton">
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات دیگر</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            
                                                        

                                                            
                                                                <div class="button-list">
                                                                    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#leftOffcanvas" aria-controls="leftOffcanvas">Offcanvas چپ</button>
                                                                    <button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#rightOffcanvas" aria-controls="rightOffcanvas">Offcanvas راست</button>
                                                                    <button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#topOffcanvas" aria-controls="topOffcanvas">Offcanvas بالا</button>
                                                                    <button class="btn btn-info" type="button" data-bs-toggle="offcanvas" data-bs-target="#bottomOffcanvas" aria-controls="bottomOffcanvas">Offcanvas پایین</button>
                                                                </div>
                
                                                                <!-- offcanvas چپ -->
                                                                <div class="offcanvas offcanvas-start" tabindex="-1" id="leftOffcanvas" aria-labelledby="leftOffcanvasLabel">
                                                                    <div class="offcanvas-header">
                                                                        <h5 class="offcanvas-title mt-0" id="leftOffcanvasLabel">Offcanvas</h5>
                                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="بستن"></button>
                                                                    </div>
                                                                    <div class="offcanvas-body">
                                                                        <p>
                                                                            برخی متن به عنوان جایگزین. در زندگی واقعی شما می‌توانید عناصری که انتخاب کرده‌اید را داشته باشید. مانند، متن، تصاویر، لیست‌ها و غیره.
                                                                        </p>
                                                                        <div class="dropdown mt-3">
                                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="leftDropdownMenuButton" data-bs-toggle="dropdown">
                                                                                دکمه کشویی
                                                                            </button>
                                                                            <ul class="dropdown-menu" aria-labelledby="leftDropdownMenuButton">
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات دیگر</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                
                                                                <!-- offcanvas راست -->
                                                                <div class="offcanvas offcanvas-end" tabindex="-1" id="rightOffcanvas" aria-labelledby="rightOffcanvasLabel">
                                                                    <div class="offcanvas-header">
                                                                        <h5 class="offcanvas-title mt-0" id="rightOffcanvasLabel">Offcanvas</h5>
                                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="بستن"></button>
                                                                    </div>
                                                                    <div class="offcanvas-body">
                                                                        <p>
                                                                            برخی متن به عنوان جایگزین. در زندگی واقعی شما می‌توانید عناصری که انتخاب کرده‌اید را داشته باشید. مانند، متن، تصاویر، لیست‌ها و غیره.
                                                                        </p>
                                                                        <div class="dropdown mt-3">
                                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="rightDropdownMenuButton" data-bs-toggle="dropdown">
                                                                                دکمه کشویی
                                                                            </button>
                                                                            <ul class="dropdown-menu" aria-labelledby="rightDropdownMenuButton">
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات دیگر</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                
                                                                <!-- offcanvas بالا -->
                                                                <div class="offcanvas offcanvas-top" tabindex="-1" id="topOffcanvas" aria-labelledby="topOffcanvasLabel">
                                                                    <div class="offcanvas-header">
                                                                        <h5 class="offcanvas-title mt-0" id="topOffcanvasLabel">Offcanvas</h5>
                                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="بستن"></button>
                                                                    </div>
                                                                    <div class="offcanvas-body">
                                                                        <p>
                                                                            برخی متن به عنوان جایگزین. در زندگی واقعی شما می‌توانید عناصری که انتخاب کرده‌اید را داشته باشید. مانند، متن، تصاویر، لیست‌ها و غیره.
                                                                        </p>
                                                                        <div class="dropdown mt-3">
                                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="topDropdownMenuButton" data-bs-toggle="dropdown">
                                                                                دکمه کشویی
                                                                            </button>
                                                                            <ul class="dropdown-menu" aria-labelledby="topDropdownMenuButton">
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات دیگر</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                
                                                                <!-- offcanvas پایین -->
                                                                <div class="offcanvas offcanvas-bottom" tabindex="-1" id="bottomOffcanvas" aria-labelledby="bottomOffcanvasLabel">
                                                                    <div class="offcanvas-header">
                                                                        <h5 class="offcanvas-title mt-0" id="bottomOffcanvasLabel">Offcanvas</h5>
                                                                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="بستن"></button>
                                                                    </div>
                                                                    <div class="offcanvas-body">
                                                                        <p>
                                                                            برخی متن به عنوان جایگزین. در زندگی واقعی شما می‌توانید عناصری که انتخاب کرده‌اید را داشته باشید. مانند، متن، تصاویر، لیست‌ها و غیره.
                                                                        </p>
                                                                        <div class="dropdown mt-3">
                                                                            <button class="btn btn-primary dropdown-toggle" type="button" id="bottomDropdownMenuButton" data-bs-toggle="dropdown">
                                                                                دکمه کشویی
                                                                            </button>
                                                                            <ul class="dropdown-menu" aria-labelledby="bottomDropdownMenuButton">
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">عملیات دیگر</a></li>
                                                                                <li><a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>