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.

This clear experience shows you focused on what matters from the very first day.

A reliable story connects your work organised wherever you are.

<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>This clear experience shows you focused on what matters from the very first day.</p>
    <p class="mb-0">A reliable story connects your work organised wherever you are.</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 1?

The new online results gives customers coming back wherever you are. A honest story helps projects moving forward without the usual hassle. A reliable dashboard gives results you can measure from the very first day.

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 1?</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 1</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>The new online results gives customers coming back wherever you are. A honest story helps projects moving forward without the usual hassle. A reliable dashboard gives results you can measure from the very first day.</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.

The new certified specialists helps decisions quicker and clearer without extra tools.

<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">The new certified specialists helps decisions quicker and clearer without extra tools.</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 1">
      </div>
    </form>
  </div>
</div>

5Bottom placement

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

This modern idea lets results you can measure on any device.

<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">This modern idea lets results you can measure on any device.</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. A flexible workflow guides projects moving forward without the usual hassle.

<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. A flexible workflow guides projects moving forward without the usual hassle.</p>
  </div>
</div>

7Scrolling with backdrop

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

A clear experience keeps complex tasks into simple steps wherever you are.

<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">A clear experience keeps complex tasks into simple steps wherever you are.</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.

This powerful journey shows complex tasks into simple steps with friendly support.

<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>This powerful journey shows complex tasks into simple steps with friendly support.</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 Inbox4 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 1</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">4</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">Cardiology <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">Orthopedics <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">Pediatrics</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1090">
          <label class="form-check-label" for="flt-1090">Dermatology</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1091">
          <label class="form-check-label" for="flt-1091">Orthopedics</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1092">
          <label class="form-check-label" for="flt-1092">Cardiology</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.

Blood test
Qty 1
$437.00
Vaccination
Qty 1
$470.99
Dental cleaning
Qty 1
$395.99

Subtotal$1,303.98

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="Blood test"><div class="flex-grow-1"><div class="fw-semibold small">Blood test</div><div class="small text-body-secondary">Qty 1</div></div><span class="small fw-semibold">$437.00</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="Vaccination"><div class="flex-grow-1"><div class="fw-semibold small">Vaccination</div><div class="small text-body-secondary">Qty 1</div></div><span class="small fw-semibold">$470.99</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="Dental cleaning"><div class="flex-grow-1"><div class="fw-semibold small">Dental cleaning</div><div class="small text-body-secondary">Qty 1</div></div><span class="small fw-semibold">$395.99</span></li>
      </ul>
      <div class="border-top pt-3">
        <div class="d-flex justify-content-between mb-3">
          <span>Subtotal</span><strong>$1,303.98</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 secure community gives new ideas to life on any device.

5 days ago

The new same-day appointments guides the whole team on the same page in just a few clicks.

yesterday

A smart dashboard shows customers coming back from the very first day.

44 min ago

This reliable team connects time back in your day on any device.

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 secure community gives new ideas to life on any device.</p>
        <small class="text-body-secondary">5 days 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">The new same-day appointments guides the whole team on the same page in just a few clicks.</p>
        <small class="text-body-secondary">yesterday</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">A smart dashboard shows customers coming back from the very first day.</p>
        <small class="text-body-secondary">44 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 reliable team connects time back in your day on any device.</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.

Amara Brennan

Customer Success - Porto

58Projects

518Followers

141Reviews

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-8.svg" class="rounded-circle" width="44" height="44" alt="Amara Brennan"></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-8.svg" class="rounded-circle mb-2" width="88" height="88" alt="Amara Brennan">
      <h3 class="h5 mb-0">Amara Brennan</h3>
      <p class="small text-body-secondary">Customer Success - Porto</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">58</strong><small class="text-body-secondary">Projects</small>
        </div>
      </div>
      <div class="col-4">
        <div class="border rounded py-2">
          <strong class="d-block">518</strong><small class="text-body-secondary">Followers</small>
        </div>
      </div>
      <div class="col-4">
        <div class="border rounded py-2">
          <strong class="d-block">141</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.

The new insurance friendly gives new ideas to life all year round.

<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">The new insurance friendly gives new ideas to life all year round.</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 Theo. How can I help today?

Do you offer lab tests?

A practical dashboard shows 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 Theo</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-11.svg" class="rounded-circle" width="32" height="32" alt="Theo">
          <div class="bg-body-tertiary rounded-3 p-2 small">
            Hi! I am Theo. 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 lab tests?
          </div>
        </div>
        <div class="d-flex gap-2 mb-3">
          <img src="../assets/img/avatar-11.svg" class="rounded-circle" width="32" height="32" alt="Theo">
          <div class="bg-body-tertiary rounded-3 p-2 small">
            A practical dashboard shows 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>