Backdrop Example

Triggered by either a Button or Link

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

HTML Code for this Element

<a class="btn btn-primary mb-2 me-2" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
    Link with href
</a>
<button class="btn btn-primary mb-2 me-2" 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">
    <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">
                Dropdown button
            </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>

Backdrop Placement

Place an offcanvas on the right of the viewport.

...

HTML Code for this Element

<!--Top-->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        ...
    </div>
</div>

<!--Right-->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        ...
    </div>
</div>

<!--Bottom-->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body small">
        ...
    </div>
</div>

Body scrolling and Backdrop

Scrolling the body element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to enable body scrolling.

Try scrolling the rest of the page to see this option in action.

I will not close if you click outside of me.

Try scrolling the rest of the page to see this option in action.

HTML Code for this Element

<!--Scrolling & Backdrop-->
<button class="btn btn-primary mb-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <p>Try scrolling the rest of the page to see this option in action.</p>
    </div>
</div>

<!--Static Offcanvas-->
<button class="btn btn-primary mb-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
    Toggle static offcanvas
</button>


<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div>
        I will not close if you click outside of me.
        </div>
    </div>
</div>

<!--Body Scrolling enabled-->
<button class="btn btn-primary mb-2" 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">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <p>Try scrolling the rest of the page to see this option in action.</p>
    </div>
</div>

Large Content for Scroll Reference

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat voluptas, autem delectus amet, earum alias minus maxime quam eaque suscipit repellat vero atque consectetur error rerum culpa nobis cum commodi perferendis saepe veniam tempore quisquam eos ducimus! Id sit facere, perspiciatis illo nobis quaerat, fugit deserunt adipisci hic dicta reiciendis! Magnam quidem a ratione, alias impedit id corrupti quisquam quod enim est aperiam magni eum blanditiis perferendis consectetur. Dignissimos eius vero dolorum labore qui harum voluptatum laudantium temporibus ipsam esse pariatur iusto sunt deserunt a, sequi possimus obcaecati porro adipisci dolorem odio repellendus optio cupiditate nobis magni. Dicta, incidunt praesentium.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde tenetur quis temporibus sequi praesentium repellat fugit reprehenderit, nam earum quasi excepturi pariatur dolore totam vel harum voluptatum magnam illum corrupti molestiae, nesciunt dicta mollitia. Voluptatem, aut? Praesentium magni eligendi, consequatur odit aspernatur, obcaecati fugit molestias blanditiis quod in itaque tenetur eaque velit nesciunt nam alias iusto necessitatibus voluptas dolorum ducimus. Iure numquam doloremque quas impedit amet eaque cumque, error pariatur eligendi, deleniti, vel modi dicta et sapiente animi. Numquam, quam nobis voluptatibus corporis illum animi! Similique officia ad recusandae illo assumenda ipsam, voluptates iusto, quibusdam veniam tempore natus cum. Atque deserunt, soluta sequi, laudantium illum accusantium vitae ab, non dolores veniam officia quae ducimus distinctio fugiat. Ullam fugit ipsa autem aut nam, debitis error hic maiores, excepturi, neque delectus fuga. Earum, beatae, fugit odit aspernatur cum blanditiis quas excepturi saepe laborum explicabo delectus temporibus odio mollitia! Exercitationem consequatur alias eveniet ipsum eaque voluptate quisquam eum omnis repellat eius fuga rem, ullam excepturi maiores tempore modi incidunt maxime nesciunt repudiandae accusantium qui aliquam vel dignissimos. Dolores voluptate reiciendis tenetur omnis aspernatur doloremque! Voluptate totam temporibus consectetur quisquam, voluptatibus corporis enim, fugiat, nulla magnam perspiciatis nam expedita provident sapiente nostrum autem perferendis ex facere. Cum a aliquam hic odit facere accusamus dignissimos sit illum officia molestias quo voluptatem fuga soluta reiciendis inventore, aut facilis nam accusantium minus similique? Eos aliquam rem harum aperiam vitae vel dolorem odio, placeat optio odit et earum saepe beatae natus similique nam, architecto at veritatis sunt consectetur!