Placements
End
Offcanvas End

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.

Top
Offcanvas Top

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.

Offcanvas Placements Code 

<div class="col-lg-12">
    <div class="card">
        <h5 class="card-header">Placements</h5>
        <div class="card-body">
            <div class="row gy-3">
                <!-- End Offcanvas -->
                <div class="col-lg-3 col-md-6">
                    <small class="fw-medium mb-4">End</small>
                    <div class="mt-4">
                        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd">Toggle End</button>
                        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd">
                            <div class="offcanvas-header">
                                <h5 class="offcanvas-title">Offcanvas End</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
                            </div>
                            <div class="offcanvas-body">
                                <p>Lorem ipsum dummy text...</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Top Offcanvas -->
                <div class="col-lg-3 col-md-6">
                    <small class="fw-medium mb-4">Top</small>
                    <div class="mt-4">
                        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop">Toggle Top</button>
                        <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop">
                            <div class="offcanvas-header">
                                <h5 class="offcanvas-title">Offcanvas Top</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
                            </div>
                            <div class="offcanvas-body">
                                <p>Lorem ipsum dummy text...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>