Offcanvas

<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#oc-left">
    Open Left
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="oc-left">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        Slide-in content from the left.
    </div>
</div>

<button class="btn btn-outline-primary" data-bs-toggle="offcanvas" data-bs-target="#oc-right">
    Open Right
</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-right">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">Slide-in content from the right.</div>
</div>

<button class="btn btn-secondary" data-bs-toggle="offcanvas" data-bs-target="#oc-top">
    Open Top
</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="oc-top">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Notice</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">Slides down from the top.</div>
</div>

<button class="btn btn-dark" data-bs-toggle="offcanvas" data-bs-target="#oc-bottom">
    Open Bottom
</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="oc-bottom">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Cookie Settings</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">Slides up from the bottom.</div>
</div>

<button class="btn btn-danger" data-bs-toggle="offcanvas" data-bs-target="#oc-backdrop">
    Dark Backdrop
</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-backdrop"
     data-bs-backdrop="true" data-bs-scroll="true">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Settings</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">Backdrop + scroll lock.</div>
</div>

<button class="btn btn-success" data-bs-toggle="offcanvas" data-bs-target="#oc-form">
    Open Form
</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-form" style="width: 380px;">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">New Message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <form>
            <div class="mb-3">
                <label class="form-label">To</label>
                <input type="email" class="form-control" placeholder="[email protected]">
            </div>
            <div class="mb-3">
                <label class="form-label">Message</label>
                <textarea class="form-control" rows="4"></textarea>
            </div>
            <button class="btn btn-primary w-100">Send</button>
        </form>
    </div>
</div>