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.

Start in minutes and get help from a real person whenever you need it.

We listen first, then build a plan around what you actually need.

<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 text-lg" 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>Start in minutes and get help from a real person whenever you need it.</p>
    <p class="mb-0">We listen first, then build a plan around what you actually need.</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 Bloomix Nest?

Our team has done this many times, so you never have to guess. Three days of keynotes, hands-on workshops and evening meetups. Every detail is handled by people who care about getting it right.

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 Bloomix Nest?</a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="oc-1075" aria-labelledby="oc-1075-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title text-lg" id="oc-1075-label">About Bloomix Nest</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Our team has done this many times, so you never have to guess. Three days of keynotes, hands-on workshops and evening meetups. Every detail is handled by people who care about getting it right.</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.

Every attendee receives a certificate of participation.

<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 text-lg" 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">Every attendee receives a certificate of participation.</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 text-lg" 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="sr-only" 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 Bloomix Nest">
      </div>
    </form>
  </div>
</div>

5Bottom placement

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

We keep things simple, so you can focus on what matters to you.

<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 text-lg" 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">We keep things simple, so you can focus on what matters to you.</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. Start in minutes and get help from a real person whenever you need it.

<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 text-lg" 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. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
</div>

7Scrolling with backdrop

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

Workshops are limited to thirty seats, so everyone gets hands-on time.

<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 text-lg" 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">Workshops are limited to thirty seats, so everyone gets hands-on time.</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 text-lg" 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.

Sponsors meet decision-makers in a relaxed, friendly setting.

<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 text-lg text-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>Sponsors meet decision-makers in a relaxed, friendly setting.</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 Inbox5 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 text-lg" id="oc-1084-label">Bloomix Nest</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 flex 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 flex 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 flex items-center gap-2"><i class="bi bi-inbox-fill" aria-hidden="true"></i>Inbox<span class="badge text-bg-danger rounded-full ms-auto">5</span></a><a href="#" class="list-group-item list-group-item-action flex 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 flex 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 flex 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 text-lg" 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-full text-start flex justify-between items-center" type="button" data-ui-toggle="collapse" data-ui-target="#sub-1086" aria-expanded="true" aria-controls="sub-1086">Keynote <i class="bi bi-chevron-down" aria-hidden="true"></i></button><div class="ui-collapse show" id="sub-1086"><ul class="list-unstyled ps-6 small"><li><a href="#" class="block py-1 link-body-emphasis">Overview</a></li><li><a href="#" class="block py-1 link-body-emphasis">Updates</a></li><li><a href="#" class="block py-1 link-body-emphasis">Reports</a></li></ul></div></li>
      <li class="mb-1"><button class="btn w-full text-start flex justify-between items-center collapsed" type="button" data-ui-toggle="collapse" data-ui-target="#sub-1087" aria-expanded="false" aria-controls="sub-1087">Workshop <i class="bi bi-chevron-down" aria-hidden="true"></i></button><div class="ui-collapse" id="sub-1087"><ul class="list-unstyled ps-6 small"><li><a href="#" class="block py-1 link-body-emphasis">New</a></li><li><a href="#" class="block py-1 link-body-emphasis">Popular</a></li><li><a href="#" class="block py-1 link-body-emphasis">Archived</a></li></ul></div></li>
      <li><a href="#" class="btn w-full 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 text-lg" 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-6">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1089">
          <label class="form-check-label" for="flt-1089">Keynote</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1090">
          <label class="form-check-label" for="flt-1090">Panel</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1091">
          <label class="form-check-label" for="flt-1091">Webinar</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1092">
          <label class="form-check-label" for="flt-1092">Workshop</label>
        </div>
      </div>
      <label for="flt-price-1093" class="form-label h6 flex justify-between">Max price <output id="flt-out-1094" class="font-normal">250</output></label>
      <input type="range" class="form-range mb-6" 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-6" 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="flex gap-2">
        <button type="reset" class="btn btn-outline-secondary flex-auto">Reset</button>
        <button type="button" class="btn btn-primary flex-auto" data-ui-dismiss="offcanvas">Apply</button>
      </div>
    </form>
  </div>
</div>

13Shopping cart

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

Group bundle
Qty 1
$2,000
Full access pass
Qty 1
$469.00
Panel day ticket
Qty 1
$195.00

Subtotal$2,664.00

Checkout

<button class="btn btn-primary 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 text-lg" 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="flex flex-col h-full">
      <ul class="list-group list-group-flush grow">
        <li class="list-group-item flex gap-4 items-center px-0"><img src="../assets/img/product-6.svg" class="rounded-md" width="56" height="56" alt="Group bundle"><div class="grow"><div class="font-semibold small">Group bundle</div><div class="small text-muted">Qty 1</div></div><span class="small font-semibold">$2,000</span></li>
        <li class="list-group-item flex gap-4 items-center px-0"><img src="../assets/img/product-2.svg" class="rounded-md" width="56" height="56" alt="Full access pass"><div class="grow"><div class="font-semibold small">Full access pass</div><div class="small text-muted">Qty 1</div></div><span class="small font-semibold">$469.00</span></li>
        <li class="list-group-item flex gap-4 items-center px-0"><img src="../assets/img/product-11.svg" class="rounded-md" width="56" height="56" alt="Panel day ticket"><div class="grow"><div class="font-semibold small">Panel day ticket</div><div class="small text-muted">Qty 1</div></div><span class="small font-semibold">$195.00</span></li>
      </ul>
      <div class="border-t pt-4">
        <div class="flex justify-between mb-4">
          <span>Subtotal</span><strong>$2,664.00</strong>
        </div>
        <a href="#" class="btn btn-primary w-full mb-2">Checkout</a>
        <button type="button" class="btn btn-link w-full" 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

The venue is a short walk from the station and fully accessible.

1 days ago

Every session is recorded, so you can catch up on anything you missed.

just now

Our evening party is the best place to turn talks into friendships.

yesterday

We measure success by how many attendees come back and tell their friends.

16 hours ago

<button class="btn btn-light border 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="absolute top-0 start-full -translate-x-1/2 -translate-y-1/2 p-1 bg-danger border border-light rounded-full"><span class="sr-only">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 text-lg" 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="flex gap-4 py-4 border-b">
      <span class="text-primary-ink text-lg"><i class="bi bi-chat-dots-fill" aria-hidden="true"></i></span>
      <div>
        <p class="small mb-1">The venue is a short walk from the station and fully accessible.</p>
        <small class="text-muted">1 days ago</small>
      </div>
    </div>
    <div class="flex gap-4 py-4 border-b">
      <span class="text-success-emphasis text-lg"><i class="bi bi-cloud-check-fill" aria-hidden="true"></i></span>
      <div>
        <p class="small mb-1">Every session is recorded, so you can catch up on anything you missed.</p>
        <small class="text-muted">just now</small>
      </div>
    </div>
    <div class="flex gap-4 py-4 border-b">
      <span class="text-info-emphasis text-lg"><i class="bi bi-person-plus-fill" aria-hidden="true"></i></span>
      <div>
        <p class="small mb-1">Our evening party is the best place to turn talks into friendships.</p>
        <small class="text-muted">yesterday</small>
      </div>
    </div>
    <div class="flex gap-4 py-4 border-b">
      <span class="text-warning-emphasis text-lg"><i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i></span>
      <div>
        <p class="small mb-1">We measure success by how many attendees come back and tell their friends.</p>
        <small class="text-muted">16 hours ago</small>
      </div>
    </div>
  </div>
</div>

15Profile panel

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

Zoe Silva

Art Director - Barcelona

26Projects

3.8kFollowers

210Reviews

My account Billing Sign out

<button class="btn p-0 border-0 rounded-full" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1098" aria-controls="oc-1098" aria-label="Open profile"><img src="../assets/img/avatar-7.svg" class="rounded-full" width="44" height="44" alt="Zoe Silva"></button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1098" aria-labelledby="oc-1098-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title text-lg" 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-6">
      <img src="../assets/img/avatar-7.svg" class="rounded-full mb-2" width="88" height="88" alt="Zoe Silva">
      <h3 class="h5 mb-0">Zoe Silva</h3>
      <p class="small text-muted">Art Director - Barcelona</p>
    </div>
    <div class="row text-center g-2 mb-6">
      <div class="col-4">
        <div class="border rounded-md py-2">
          <strong class="block">26</strong><small class="text-muted">Projects</small>
        </div>
      </div>
      <div class="col-4">
        <div class="border rounded-md py-2">
          <strong class="block">3.8k</strong><small class="text-muted">Followers</small>
        </div>
      </div>
      <div class="col-4">
        <div class="border rounded-md py-2">
          <strong class="block">210</strong><small class="text-muted">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-emphasis"><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 text-lg" 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="flex flex-col h-full">
      <div class="grow">
        <div class="form-check form-switch mb-4">
          <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-4">
          <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-6">
          <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="flex gap-2 pt-4 border-t">
        <button type="button" class="btn btn-outline-secondary flex-auto" data-ui-dismiss="offcanvas">Cancel</button>
        <button type="button" class="btn btn-primary flex-auto" 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.

Friendly people answer your questions quickly, by phone, chat or email.

<button class="btn btn-primary lg:hidden 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 text-lg" 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-4 border rounded-md bg-surface-3 w-full">
      <p class="mb-0">Friendly people answer your questions quickly, by phone, chat or email.</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 text-lg" 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-4">
        <label for="ct-name-1106" class="form-label">Name</label>
        <input type="text" class="form-control" id="ct-name-1106">
      </div>
      <div class="mb-4">
        <label for="ct-email-1107" class="form-label">Email</label>
        <input type="email" class="form-control" id="ct-email-1107">
      </div>
      <div class="mb-4">
        <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-full"><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 text-lg" 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-center">
      <div class="col-4 col-sm-2">
        <a href="#" class="block text-center link-body-emphasis no-underline py-2"><span class="inline-flex items-center justify-center rounded-full bg-surface-3 text-xl mb-1" style="width:3rem;height:3rem"><i class="bi bi-envelope-fill" aria-hidden="true"></i></span><small class="block">Email</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="block text-center link-body-emphasis no-underline py-2"><span class="inline-flex items-center justify-center rounded-full bg-surface-3 text-xl mb-1" style="width:3rem;height:3rem"><i class="bi bi-chat-dots-fill" aria-hidden="true"></i></span><small class="block">Message</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="block text-center link-body-emphasis no-underline py-2"><span class="inline-flex items-center justify-center rounded-full bg-surface-3 text-xl mb-1" style="width:3rem;height:3rem"><i class="bi bi-link-45deg" aria-hidden="true"></i></span><small class="block">Copy link</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="block text-center link-body-emphasis no-underline py-2"><span class="inline-flex items-center justify-center rounded-full bg-surface-3 text-xl mb-1" style="width:3rem;height:3rem"><i class="bi bi-qr-code" aria-hidden="true"></i></span><small class="block">QR code</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="block text-center link-body-emphasis no-underline py-2"><span class="inline-flex items-center justify-center rounded-full bg-surface-3 text-xl mb-1" style="width:3rem;height:3rem"><i class="bi bi-printer-fill" aria-hidden="true"></i></span><small class="block">Print</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="block text-center link-body-emphasis no-underline py-2"><span class="inline-flex items-center justify-center rounded-full bg-surface-3 text-xl mb-1" style="width:3rem;height:3rem"><i class="bi bi-download" aria-hidden="true"></i></span><small class="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 Kai. How can I help today?

Do you offer sponsorship?

Thousands of attendees already trust us, and we work hard to keep it that way.

<button class="btn btn-primary rounded-full" 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 text-lg" id="oc-1111-label">Chat with Kai</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="flex flex-col h-full">
      <div class="grow">
        <div class="flex gap-2 mb-4">
          <img src="../assets/img/avatar-8.svg" class="rounded-full" width="32" height="32" alt="Kai">
          <div class="bg-surface-3 rounded-lg p-2 small">
            Hi! I am Kai. How can I help today?
          </div>
        </div>
        <div class="flex justify-end mb-4">
          <div class="text-bg-primary rounded-lg p-2 small">
            Do you offer sponsorship?
          </div>
        </div>
        <div class="flex gap-2 mb-4">
          <img src="../assets/img/avatar-8.svg" class="rounded-full" width="32" height="32" alt="Kai">
          <div class="bg-surface-3 rounded-lg p-2 small">
            Thousands of attendees already trust us, and we work hard to keep it that way.
          </div>
        </div>
      </div>
      <form class="input-group">
        <label for="chat-msg-1112" class="sr-only">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>