<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
        Link with href
    </a>
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
        دکمه با data-bs-target
    </button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <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 class="dropdown mt-3">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                دکمه کشویی
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
        </div>
    </div>
</div>

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions2" aria-controls="offcanvasWithBothOptions2">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions2" aria-labelledby="offcanvasWithBothOptions2Label">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasWithBothOptions2Label">Backdrop with scrolling</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        ...
    </div>
</div>

<div class="d-flex align-items-center gap-3 flex-wrap">
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasStart" aria-controls="offcanvasStart">
        Toggle Start
    </button>
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
        Toggle Top
    </button>
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd">
        Toggle End
    </button>
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">
        Toggle Bottom
    </button>
</div>

<!-- start:: Start Offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasStart" aria-labelledby="offcanvasStartLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasStartLabel">Explore Our Offerings</h5>
        <button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="offcanvas" aria-label="Close">
            <i class="ri-close-large-line fw-semibold"></i>
        </button>
    </div>

    <div class="offcanvas-body">
        ...
    </div>
</div>
<!-- end:: Start Offcanvas -->

<!-- start:: Top Offcanvas -->
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel" style="min-height:481px;">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasStartLabel">Explore Our Offerings</h5>
        <button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="offcanvas" aria-label="Close">
            <i class="ri-close-large-line fw-semibold"></i>
        </button>
    </div>

    <div class="offcanvas-body">
        ...
    </div>
</div>
<!-- end:: Top Offcanvas -->

<!-- start:: End Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasStartLabel">Explore Our Offerings</h5>
        <button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="offcanvas" aria-label="Close">
            <i class="ri-close-large-line fw-semibold"></i>
        </button>
    </div>

    <div class="offcanvas-body">
        ...
    </div>
</div>
<!-- end:: End Offcanvas -->

<!-- start:: Bottom Offcanvas -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel" style="min-height:481px;">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasStartLabel">Explore Our Offerings</h5>
        <button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="offcanvas" aria-label="Close">
            <i class="ri-close-large-line fw-semibold"></i>
        </button>
    </div>

    <div class="offcanvas-body">
        ...
    </div>
</div>