Offcanvas

Offcanvas panels slide in from any edge of the screen and are perfect for menus, filters, carts and quick settings that should not take a whole page. The examples show the four placements, backdrop and scrolling options, a responsive panel and complete ready-to-use drawers.

1Basic offcanvas

A panel that slides in from the left edge, opened by a button.

The new local guides connects projects moving forward without extra tools.

The new best price guarantee turns complex tasks into simple steps without the usual hassle.

<button class="btn btn-primary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1074" aria-controls="oc-1074">Open panel</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="oc-1074" aria-labelledby="oc-1074-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1074-label">Hello there</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>The new local guides connects projects moving forward without extra tools.</p>
    <p class="mb-0">The new best price guarantee turns complex tasks into simple steps without the usual hassle.</p>
  </div>
</div>

2Link as trigger

Any link with <code>href="#id"</code> and <code>data-ui-toggle="offcanvas"</code> can open the panel.

What is Brand name 14?

The new local guides gives new ideas to life for teams of every size. The new curated stays helps your work organised at a fair price. The new 24/7 assistance turns decisions quicker and clearer from the very first day. A smart routine brings every detail in view on any device.

Learn more

<a class="link-primary" data-ui-toggle="offcanvas" href="#oc-1075" role="button" aria-controls="oc-1075"><i class="bi bi-info-circle-fill" aria-hidden="true"></i> What is Brand name 14?</a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="oc-1075" aria-labelledby="oc-1075-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1075-label">About Brand name 14</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>The new local guides gives new ideas to life for teams of every size. The new curated stays helps your work organised at a fair price. The new 24/7 assistance turns decisions quicker and clearer from the very first day. A smart routine brings every detail in view on any device.</p>
    <a href="#" class="btn btn-outline-primary btn-sm">Learn more</a>
  </div>
</div>

3End placement

<code>.offcanvas-end</code> slides the panel in from the right.

Our car rental helps decisions quicker and clearer on any device.

<button class="btn btn-outline-primary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1076" aria-controls="oc-1076">From the right <i class="bi bi-arrow-left" aria-hidden="true"></i></button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1076" aria-labelledby="oc-1076-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1076-label">Details</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">Our car rental helps decisions quicker and clearer on any device.</p>
  </div>
</div>

4Top placement

<code>.offcanvas-top</code> drops a short panel from the top - good for announcements or a search bar.

<button class="btn btn-outline-secondary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1077" aria-controls="oc-1077"><i class="bi bi-arrow-down" aria-hidden="true"></i> From the top</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="oc-1077" aria-labelledby="oc-1077-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1077-label">Search everything</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <form class="container" role="search" style="max-width:640px">
      <label class="visually-hidden" for="oc-search-1078">Search</label>
      <div class="input-group input-group-lg">
        <span class="input-group-text"><i class="bi bi-search" aria-hidden="true"></i></span><input class="form-control" type="search" id="oc-search-1078" placeholder="Search Brand name 14">
      </div>
    </form>
  </div>
</div>

5Bottom placement

<code>.offcanvas-bottom</code> works like a mobile bottom sheet.

The new free cancellation connects new ideas to life without the usual hassle.

<button class="btn btn-outline-secondary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1079" aria-controls="oc-1079"><i class="bi bi-arrow-up" aria-hidden="true"></i> From the bottom</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="oc-1079" aria-labelledby="oc-1079-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1079-label">Bottom sheet</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">The new free cancellation connects new ideas to life without the usual hassle.</p>
  </div>
</div>

6Body scrolling

<code>data-ui-scroll="true"</code> with <code>data-ui-backdrop="false"</code> keeps the page scrollable and clickable behind the panel.

Scroll the page while this panel is open. The new best price guarantee gives results you can measure on any device.

<button class="btn btn-secondary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1080" aria-controls="oc-1080">Panel without backdrop</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="oc-1080" aria-labelledby="oc-1080-label" data-ui-scroll="true" data-ui-backdrop="false">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1080-label">Page stays usable</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">Scroll the page while this panel is open. The new best price guarantee gives results you can measure on any device.</p>
  </div>
</div>

7Scrolling with backdrop

<code>data-ui-scroll="true"</code> alone keeps page scrolling but dims the page.

The new 24/7 assistance makes the whole team on the same page with friendly support.

<button class="btn btn-secondary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1081" aria-controls="oc-1081">Scroll + backdrop</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="oc-1081" aria-labelledby="oc-1081-label" data-ui-scroll="true">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1081-label">Backdrop and scrolling</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">The new 24/7 assistance makes the whole team on the same page with friendly support.</p>
  </div>
</div>

8Static backdrop

<code>data-ui-backdrop="static"</code> only closes from the close button - for panels with unsaved input.

Clicking outside will not close this panel.

<button class="btn btn-warning" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1082" aria-controls="oc-1082"><i class="bi bi-lock-fill" aria-hidden="true"></i> Static panel</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1082" aria-labelledby="oc-1082-label" data-ui-backdrop="static">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1082-label">Unsaved changes</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Clicking outside will not close this panel.</p>
    <button type="button" class="btn btn-primary" data-ui-dismiss="offcanvas">Save and close</button>
  </div>
</div>

9Dark panel

Set <code>data-ui-theme="dark"</code> on the panel for a dark sidebar in a light page.

Our guided tours helps new ideas to life for teams of every size.

<button class="btn btn-dark" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1083" aria-controls="oc-1083"><i class="bi bi-moon-fill" aria-hidden="true"></i> Dark panel</button>
<div class="offcanvas offcanvas-start" data-ui-theme="dark" tabindex="-1" id="oc-1083" aria-labelledby="oc-1083-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5 text-body-emphasis" id="oc-1083-label">Night shift</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body bg-dark text-body">
    <p>Our guided tours helps new ideas to life for teams of every size.</p>
    <button type="button" class="btn btn-outline-light btn-sm">Action</button>
  </div>
</div>

10Navigation menu

A side menu built with a flush list group, icons and a badge.

Home Dashboard Inbox7 Team Calendar Settings

<button class="btn btn-primary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1084" aria-controls="oc-1084"><i class="bi bi-list" aria-hidden="true"></i> Menu</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="oc-1084" aria-labelledby="oc-1084-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1084-label">Brand name 14</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="list-group list-group-flush">
      <a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2"><i class="bi bi-house-door-fill" aria-hidden="true"></i>Home</a><a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2 active" aria-current="true"><i class="bi bi-speedometer2" aria-hidden="true"></i>Dashboard</a><a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2"><i class="bi bi-inbox-fill" aria-hidden="true"></i>Inbox<span class="badge text-bg-danger rounded-pill ms-auto">7</span></a><a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2"><i class="bi bi-people-fill" aria-hidden="true"></i>Team</a><a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2"><i class="bi bi-calendar-fill" aria-hidden="true"></i>Calendar</a><a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2"><i class="bi bi-gear-fill" aria-hidden="true"></i>Settings</a>
    </div>
  </div>
</div>

11Nested menu

Collapsible sub-menus inside the panel keep long navigation tidy.

Account

<button class="btn btn-outline-primary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1085" aria-controls="oc-1085"><i class="bi bi-list-nested" aria-hidden="true"></i> All sections</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="oc-1085" aria-labelledby="oc-1085-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1085-label">Sections</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="list-unstyled mb-0">
      <li class="mb-1"><button class="btn w-100 text-start d-flex justify-content-between align-items-center" type="button" data-ui-toggle="collapse" data-ui-target="#sub-1086" aria-expanded="true" aria-controls="sub-1086">Adventure <i class="bi bi-chevron-down" aria-hidden="true"></i></button><div class="collapse show" id="sub-1086"><ul class="list-unstyled ps-4 small"><li><a href="#" class="d-block py-1 link-body-emphasis">Overview</a></li><li><a href="#" class="d-block py-1 link-body-emphasis">Updates</a></li><li><a href="#" class="d-block py-1 link-body-emphasis">Reports</a></li></ul></div></li>
      <li class="mb-1"><button class="btn w-100 text-start d-flex justify-content-between align-items-center collapsed" type="button" data-ui-toggle="collapse" data-ui-target="#sub-1087" aria-expanded="false" aria-controls="sub-1087">Adventure <i class="bi bi-chevron-down" aria-hidden="true"></i></button><div class="collapse" id="sub-1087"><ul class="list-unstyled ps-4 small"><li><a href="#" class="d-block py-1 link-body-emphasis">New</a></li><li><a href="#" class="d-block py-1 link-body-emphasis">Popular</a></li><li><a href="#" class="d-block py-1 link-body-emphasis">Archived</a></li></ul></div></li>
      <li><a href="#" class="btn w-100 text-start">Account</a></li>
    </ul>
  </div>
</div>

12Filters panel

A filter sidebar with checkboxes, a price range that shows its value, a sort select and apply/reset buttons.

<button class="btn btn-outline-dark" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1088" aria-controls="oc-1088"><i class="bi bi-funnel-fill" aria-hidden="true"></i> Filters</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1088" aria-labelledby="oc-1088-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1088-label">Filter results</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <form>
      <h3 class="h6">Category</h3>
      <div class="mb-4">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1089">
          <label class="form-check-label" for="flt-1089">Mountain</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1090">
          <label class="form-check-label" for="flt-1090">Beach</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1091">
          <label class="form-check-label" for="flt-1091">Adventure</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1092">
          <label class="form-check-label" for="flt-1092">City</label>
        </div>
      </div>
      <label for="flt-price-1093" class="form-label h6 d-flex justify-content-between">Max price <output id="flt-out-1094" class="fw-normal">250</output></label>
      <input type="range" class="form-range mb-4" min="0" max="500" value="250" id="flt-price-1093" data-demo-range-output="#flt-out-1094">
      <label for="flt-sort-1095" class="form-label h6">Sort by</label>
      <select class="form-select mb-4" id="flt-sort-1095">
        <option>Most popular</option>
        <option>Newest</option>
        <option>Price: low to high</option>
        <option>Price: high to low</option>
      </select>
      <div class="d-flex gap-2">
        <button type="reset" class="btn btn-outline-secondary flex-fill">Reset</button>
        <button type="button" class="btn btn-primary flex-fill" data-ui-dismiss="offcanvas">Apply</button>
      </div>
    </form>
  </div>
</div>

13Shopping cart

A cart drawer listing items with thumbnails, a subtotal and checkout buttons.

Mountain lodge
Qty 1
$105.50
Weekend getaway
Qty 1
$206.00
Ocean view suite
Qty 1
$299.99

Subtotal$611.49

Checkout

<button class="btn btn-primary position-relative" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1096" aria-controls="oc-1096"><i class="bi bi-cart3" aria-hidden="true"></i> Cart <span class="badge text-bg-light ms-1">3</span></button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1096" aria-labelledby="oc-1096-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1096-label">Your cart</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="d-flex flex-column h-100">
      <ul class="list-group list-group-flush flex-grow-1">
        <li class="list-group-item d-flex gap-3 align-items-center px-0"><img src="../assets/img/product-1.svg" class="rounded" width="56" height="56" alt="Mountain lodge"><div class="flex-grow-1"><div class="fw-semibold small">Mountain lodge</div><div class="small text-body-secondary">Qty 1</div></div><span class="small fw-semibold">$105.50</span></li>
        <li class="list-group-item d-flex gap-3 align-items-center px-0"><img src="../assets/img/product-2.svg" class="rounded" width="56" height="56" alt="Weekend getaway"><div class="flex-grow-1"><div class="fw-semibold small">Weekend getaway</div><div class="small text-body-secondary">Qty 1</div></div><span class="small fw-semibold">$206.00</span></li>
        <li class="list-group-item d-flex gap-3 align-items-center px-0"><img src="../assets/img/product-3.svg" class="rounded" width="56" height="56" alt="Ocean view suite"><div class="flex-grow-1"><div class="fw-semibold small">Ocean view suite</div><div class="small text-body-secondary">Qty 1</div></div><span class="small fw-semibold">$299.99</span></li>
      </ul>
      <div class="border-top pt-3">
        <div class="d-flex justify-content-between mb-3">
          <span>Subtotal</span><strong>$611.49</strong>
        </div>
        <a href="#" class="btn btn-primary w-100 mb-2">Checkout</a>
        <button type="button" class="btn btn-link w-100" data-ui-dismiss="offcanvas">Continue shopping</button>
      </div>
    </div>
  </div>
</div>

14Notifications panel

An activity feed in an end panel, with a header action to mark everything as read.

Mark all as read

A simple routine makes data easy to understand for teams of every size.

3 hours ago

Our holiday packages turns data easy to understand from the very first day.

2 min ago

Our guided tours lets results you can measure without the usual hassle.

28 min ago

This friendly project gives every detail in view at a fair price.

just now

<button class="btn btn-light border position-relative" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1097" aria-controls="oc-1097" aria-label="Notifications"><i class="bi bi-bell-fill" aria-hidden="true"></i><span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle"><span class="visually-hidden">New alerts</span></span></button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1097" aria-labelledby="oc-1097-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1097-label">Notifications</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="text-end">
      <a href="#" class="small">Mark all as read</a>
    </div>
    <div class="d-flex gap-3 py-3 border-bottom">
      <span class="text-primary fs-5"><i class="bi bi-chat-dots-fill" aria-hidden="true"></i></span>
      <div>
        <p class="small mb-1">A simple routine makes data easy to understand for teams of every size.</p>
        <small class="text-body-secondary">3 hours ago</small>
      </div>
    </div>
    <div class="d-flex gap-3 py-3 border-bottom">
      <span class="text-success fs-5"><i class="bi bi-cloud-check-fill" aria-hidden="true"></i></span>
      <div>
        <p class="small mb-1">Our holiday packages turns data easy to understand from the very first day.</p>
        <small class="text-body-secondary">2 min ago</small>
      </div>
    </div>
    <div class="d-flex gap-3 py-3 border-bottom">
      <span class="text-info fs-5"><i class="bi bi-person-plus-fill" aria-hidden="true"></i></span>
      <div>
        <p class="small mb-1">Our guided tours lets results you can measure without the usual hassle.</p>
        <small class="text-body-secondary">28 min ago</small>
      </div>
    </div>
    <div class="d-flex gap-3 py-3 border-bottom">
      <span class="text-warning fs-5"><i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i></span>
      <div>
        <p class="small mb-1">This friendly project gives every detail in view at a fair price.</p>
        <small class="text-body-secondary">just now</small>
      </div>
    </div>
  </div>
</div>

15Profile panel

User card with avatar, stats and account links - typical for an avatar button in the header.

Lucas Sato

Marketing Lead - Auckland

25Projects

5.0kFollowers

6Reviews

My account Billing Sign out

<button class="btn p-0 border-0 rounded-circle" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1098" aria-controls="oc-1098" aria-label="Open profile"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="44" height="44" alt="Lucas Sato"></button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1098" aria-labelledby="oc-1098-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1098-label">Profile</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="text-center mb-4">
      <img src="../assets/img/avatar-10.svg" class="rounded-circle mb-2" width="88" height="88" alt="Lucas Sato">
      <h3 class="h5 mb-0">Lucas Sato</h3>
      <p class="small text-body-secondary">Marketing Lead - Auckland</p>
    </div>
    <div class="row text-center g-2 mb-4">
      <div class="col-4">
        <div class="border rounded py-2">
          <strong class="d-block">25</strong><small class="text-body-secondary">Projects</small>
        </div>
      </div>
      <div class="col-4">
        <div class="border rounded py-2">
          <strong class="d-block">5.0k</strong><small class="text-body-secondary">Followers</small>
        </div>
      </div>
      <div class="col-4">
        <div class="border rounded py-2">
          <strong class="d-block">6</strong><small class="text-body-secondary">Reviews</small>
        </div>
      </div>
    </div>
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action"><i class="bi bi-person-fill" aria-hidden="true"></i> My account</a><a href="#" class="list-group-item list-group-item-action"><i class="bi bi-credit-card-fill" aria-hidden="true"></i> Billing</a><a href="#" class="list-group-item list-group-item-action text-danger"><i class="bi bi-box-arrow-right" aria-hidden="true"></i> Sign out</a>
    </div>
  </div>
</div>

16Settings panel

Quick settings with switches and a select; the footer buttons stay at the bottom.

Desktop notifications

Compact layout

Weekly summary email

Time zone

<button class="btn btn-outline-secondary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1099" aria-controls="oc-1099"><i class="bi bi-sliders" aria-hidden="true"></i> Quick settings</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1099" aria-labelledby="oc-1099-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1099-label">Quick settings</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="d-flex flex-column h-100">
      <div class="flex-grow-1">
        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" role="switch" id="set-1100" checked>
          <label class="form-check-label" for="set-1100">Desktop notifications</label>
        </div>
        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" role="switch" id="set-1101">
          <label class="form-check-label" for="set-1101">Compact layout</label>
        </div>
        <div class="form-check form-switch mb-4">
          <input class="form-check-input" type="checkbox" role="switch" id="set-1102" checked>
          <label class="form-check-label" for="set-1102">Weekly summary email</label>
        </div>
        <label for="set-lang-1103" class="form-label">Time zone</label>
        <select class="form-select" id="set-lang-1103">
          <option>UTC</option>
          <option>Central European Time</option>
          <option>Pacific Time</option>
          <option>Japan Standard Time</option>
        </select>
      </div>
      <div class="d-flex gap-2 pt-3 border-top">
        <button type="button" class="btn btn-outline-secondary flex-fill" data-ui-dismiss="offcanvas">Cancel</button>
        <button type="button" class="btn btn-primary flex-fill" data-ui-dismiss="offcanvas">Save</button>
      </div>
    </div>
  </div>
</div>

17Responsive offcanvas

<code>.offcanvas-lg</code> is a slide-in panel below the lg breakpoint and plain inline content above it. Narrow the window to see the button.

Our car rental helps new ideas to life at a fair price.

<button class="btn btn-primary d-lg-none mb-2" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1104" aria-controls="oc-1104"><i class="bi bi-layout-sidebar-inset" aria-hidden="true"></i> Show sidebar</button>
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="oc-1104" aria-labelledby="oc-1104-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1104-label">Sidebar</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" data-ui-target="#oc-1104" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="p-3 border rounded bg-body-tertiary w-100">
      <p class="mb-0">Our car rental helps new ideas to life at a fair price.</p>
    </div>
  </div>
</div>

18Contact form

A support form that slides in from the side, with a character counter on the message field.

<button class="btn btn-success" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1105" aria-controls="oc-1105"><i class="bi bi-chat-left-text-fill" aria-hidden="true"></i> Contact us</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1105" aria-labelledby="oc-1105-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1105-label">How can we help?</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <form>
      <div class="mb-3">
        <label for="ct-name-1106" class="form-label">Name</label>
        <input type="text" class="form-control" id="ct-name-1106">
      </div>
      <div class="mb-3">
        <label for="ct-email-1107" class="form-label">Email</label>
        <input type="email" class="form-control" id="ct-email-1107">
      </div>
      <div class="mb-3">
        <label for="ct-msg-1108" class="form-label">Message</label>
        <textarea class="form-control" id="ct-msg-1108" rows="5" maxlength="400" data-demo-counter="#ct-count-1109"></textarea>
        <div class="form-text text-end" id="ct-count-1109">
          0 / 400
        </div>
      </div>
      <button type="submit" class="btn btn-success w-100"><i class="bi bi-send-fill" aria-hidden="true"></i> Send message</button>
    </form>
  </div>
</div>

19Share sheet

A short bottom panel with a grid of share actions, sized with an inline height.

<button class="btn btn-outline-primary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1110" aria-controls="oc-1110"><i class="bi bi-share-fill" aria-hidden="true"></i> Share</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="oc-1110" aria-labelledby="oc-1110-label" style="height:auto">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1110-label">Share via</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="row g-2 justify-content-center">
      <div class="col-4 col-sm-2">
        <a href="#" class="d-block text-center link-body-emphasis text-decoration-none py-2"><span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-body-tertiary fs-4 mb-1" style="width:3rem;height:3rem"><i class="bi bi-envelope-fill" aria-hidden="true"></i></span><small class="d-block">Email</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="d-block text-center link-body-emphasis text-decoration-none py-2"><span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-body-tertiary fs-4 mb-1" style="width:3rem;height:3rem"><i class="bi bi-chat-dots-fill" aria-hidden="true"></i></span><small class="d-block">Message</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="d-block text-center link-body-emphasis text-decoration-none py-2"><span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-body-tertiary fs-4 mb-1" style="width:3rem;height:3rem"><i class="bi bi-link-45deg" aria-hidden="true"></i></span><small class="d-block">Copy link</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="d-block text-center link-body-emphasis text-decoration-none py-2"><span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-body-tertiary fs-4 mb-1" style="width:3rem;height:3rem"><i class="bi bi-qr-code" aria-hidden="true"></i></span><small class="d-block">QR code</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="d-block text-center link-body-emphasis text-decoration-none py-2"><span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-body-tertiary fs-4 mb-1" style="width:3rem;height:3rem"><i class="bi bi-printer-fill" aria-hidden="true"></i></span><small class="d-block">Print</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="d-block text-center link-body-emphasis text-decoration-none py-2"><span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-body-tertiary fs-4 mb-1" style="width:3rem;height:3rem"><i class="bi bi-download" aria-hidden="true"></i></span><small class="d-block">Save</small></a>
      </div>
    </div>
  </div>
</div>

20Chat panel

A support chat drawer: message bubbles in the body and an input pinned to the bottom.

Hi! I am Aria. How can I help today?

Do you offer travel insurance?

The new best price guarantee keeps results you can measure without extra tools.

<button class="btn btn-primary rounded-pill" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1111" aria-controls="oc-1111"><i class="bi bi-chat-dots-fill" aria-hidden="true"></i> Chat with us</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1111" aria-labelledby="oc-1111-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1111-label">Chat with Aria</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="d-flex flex-column h-100">
      <div class="flex-grow-1">
        <div class="d-flex gap-2 mb-3">
          <img src="../assets/img/avatar-10.svg" class="rounded-circle" width="32" height="32" alt="Aria">
          <div class="bg-body-tertiary rounded-3 p-2 small">
            Hi! I am Aria. How can I help today?
          </div>
        </div>
        <div class="d-flex justify-content-end mb-3">
          <div class="bg-primary text-white rounded-3 p-2 small">
            Do you offer travel insurance?
          </div>
        </div>
        <div class="d-flex gap-2 mb-3">
          <img src="../assets/img/avatar-10.svg" class="rounded-circle" width="32" height="32" alt="Aria">
          <div class="bg-body-tertiary rounded-3 p-2 small">
            The new best price guarantee keeps results you can measure without extra tools.
          </div>
        </div>
      </div>
      <form class="input-group">
        <label for="chat-msg-1112" class="visually-hidden">Message</label>
        <input type="text" class="form-control" id="chat-msg-1112" placeholder="Type a message">
        <button class="btn btn-primary" type="submit" aria-label="Send"><i class="bi bi-send-fill" aria-hidden="true"></i></button>
      </form>
    </div>
  </div>
</div>