<div class="d-flex gap-6 flex-wrap">
    <a aria-controls="example1" class="btn bg-primary-subtle text-primary" data-bs-toggle="offcanvas" href="#example1" role="button">آف کانواس با Href</a>
    <button aria-controls="example2" class="btn bg-info-subtle text-info" data-bs-target="#example2" data-bs-toggle="offcanvas" type="button">آف کانواس با هدف BS-Target</button>
    <button aria-controls="offcanvasRight" class="btn bg-danger-subtle text-danger" data-bs-target="#offcanvasRight" data-bs-toggle="offcanvas" type="button">آف کانواس درست</button>
    <button aria-controls="offcanvasBottom" class="btn bg-warning-subtle text-warning" data-bs-target="#offcanvasBottom" data-bs-toggle="offcanvas" type="button">پایین آف کانواس</button>
    <button aria-controls="offcanvasScrolling" class="btn bg-secondary-subtle text-secondary" data-bs-target="#offcanvasScrolling" data-bs-toggle="offcanvas" type="button">پیمایش بدن را فعال کنید</button>
    <button aria-controls="offcanvasWithBackdrop" class="btn bg-success-subtle text-success" data-bs-target="#offcanvasWithBackdrop" data-bs-toggle="offcanvas" type="button">فعال کردن پس زمینه (پیش فرض)</button>
    <button aria-controls="offcanvasWithBothOptions" class="btn bg-primary-subtle text-primary" data-bs-target="#offcanvasWithBothOptions" data-bs-toggle="offcanvas" type="button">هر دو پیمایش و پس زمینه را فعال کنید</button>
</div>
<!-- 1 -->
<div aria-labelledby="offcanvasExampleLabel" class="offcanvas offcanvas-start" id="example1" tabindex="-1">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">سرتیتر</h5>
        <button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"></button>
    </div>
    <div class="offcanvas-body">
        <div>
            Some text as placeholder. In real life you can have
            the elements you have chosen. لایک, text, images,
            lists, etc.
        </div>
        <div class="dropdown mt-3">
            <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" id="dropdownMenuButton" type="button">دکاردیبهشت‌ کشویی</button>
            <ul aria-labelledby="dropdownMenuButton" class="dropdown-menu">
                <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>
<!-- 2 -->
<div aria-labelledby="offcanvasExampleLabel" class="offcanvas offcanvas-start" id="example2" tabindex="-1">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">سرتیتر</h5>
        <button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"></button>
    </div>
    <div class="offcanvas-body">
        <div>
            Some text as placeholder. In real life you can have
            the elements you have chosen. لایک, text, images,
            lists, etc.
        </div>
        <div class="dropdown mt-3">
            <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" id="dropdownMenuButton" type="button">دکاردیبهشت‌ کشویی</button>
            <ul aria-labelledby="dropdownMenuButton" class="dropdown-menu">
                <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>
<!-- 3 -->
<div aria-labelledby="offcanvasRightLabel" class="offcanvas offcanvas-end" id="offcanvasRight" tabindex="-1">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">آف کانواس درست</h5>
        <button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"></button>
    </div>
    <div class="offcanvas-body">
        <div>
            Some text as placeholder. In real life you can have
            the elements you have chosen. لایک, text, images,
            lists, etc.
        </div>
        <div class="dropdown mt-3">
            <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" id="dropdownMenuButton" type="button">دکاردیبهشت‌ کشویی</button>
            <ul aria-labelledby="dropdownMenuButton" class="dropdown-menu">
                <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>
<!-- 4 -->
<div aria-labelledby="offcanvasBottomLabel" class="offcanvas offcanvas-bottom" id="offcanvasBottom" tabindex="-1">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">پایین آف کانواس</h5>
        <button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"></button>
    </div>
    <div class="offcanvas-body">
        <div>
            Some text as placeholder. In real life you can have
            the elements you have chosen. لایک, text, images,
            lists, etc.
        </div>
    </div>
</div>
<!-- 5 -->
<div aria-labelledby="offcanvasScrollingLabel" class="offcanvas offcanvas-start" data-bs-backdrop="false" data-bs-scroll="true" id="offcanvasScrolling" tabindex="-1">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasScrollingLabel">با پیمایش رنگی</h5>
        <button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"></button>
    </div>
    <div class="offcanvas-body">
        <p>برای دیدن این گزینه ، بقیه صفحه را پیمایش کنید
            </p>
    </div>
</div>
<!-- 6 -->
<div aria-labelledby="offcanvasWithBackdropLabel" class="offcanvas offcanvas-start" id="offcanvasWithBackdrop" tabindex="-1">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">آف کانواس با پس زمینه</h5>
        <button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"></button>
    </div>
    <div class="offcanvas-body">
        <p>برای دیدن این گزینه ، بقیه صفحه را پیمایش کنید
            </p>
    </div>
</div>
<!-- 7 -->
<div aria-labelledby="offcanvasWithBothOptionsLabel" class="offcanvas offcanvas-start" data-bs-scroll="true" id="offcanvasWithBothOptions" tabindex="-1">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">با پیمایش پس زمینه</h5>
        <button aria-label="Close" class="btn-close text-reset" data-bs-dismiss="offcanvas" type="button"></button>
    </div>
    <div class="offcanvas-body">
        <p>برای دیدن این گزینه ، بقیه صفحه را پیمایش کنید
            </p>
    </div>
</div>