Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Button trigger</h4>
<button>Open offcanvas</button>
<h4 class="h5 text-muted mt-3">Link trigger</h4>
<a>Open offcanvas</a>
<div id="offcanvasTrigger">
  <div>
    <h5 id="offcanvasTriggerLabel">Offcanvas</h5>
    <button></button>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
</div>

   Copy to clipboard

   Open in CodePen

<button>Open offcanvas</button>
<div id="offcanvasDark">
  <div>
    <h5 id="offcanvasDarkLabel">Offcanvas</h5>
    <button></button>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
</div>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Small</h4>
<button>Open offcanvas</button>
<div id="offcanvasSmall">
  <div>
    <h5 id="offcanvasSmallLabel">Offcanvas</h5>
    <button></button>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
</div>
<h4 class="h5 text-muted mt-3">Medium</h4>
<button>Open offcanvas</button>
<div id="offcanvasMedium">
  <div>
    <h5 id="offcanvasMediumLabel">Offcanvas</h5>
    <button></button>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
</div>
<h4 class="h5 text-muted mt-3">Large</h4>
<button>Open offcanvas</button>
<div id="offcanvasLarge">
  <div>
    <h5 id="offcanvasLargeLabel">Offcanvas</h5>
    <button></button>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
</div>
<h4 class="h5 text-muted mt-3">Extra large</h4>
<button>Open offcanvas</button>
<div id="offcanvasExtraLarge">
  <div>
    <h5 id="offcanvasExtraLargeLabel">Offcanvas</h5>
    <button></button>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
</div>
<h4 class="h5 text-muted mt-3">Extra extra large</h4>
<button>Open offcanvas</button>
<div id="offcanvasExtraExtraLarge">
  <div>
    <h5 id="offcanvasExtraExtraLargeLabel">Offcanvas</h5>
    <button></button>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
</div>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Start</h4>
<button>Open offcanvas</button>
<div id="offcanvasStart">
  <div>
    <h5 id="offcanvasStartLabel">Offcanvas</h5>
    <button></button>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
</div>
<h4 class="h5 text-muted mt-3">End</h4>
<button>Open offcanvas</button>
<div id="offcanvasEnd">
  <div>
    <h5 id="offcanvasEndLabel">Offcanvas</h5>
    <button></button>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
</div>
<h4 class="h5 text-muted mt-3">Top</h4>
<button>Open offcanvas</button>
<div id="offcanvasTop">
  <div>
    <h5 id="offcanvasTopLabel">Offcanvas</h5>
    <button></button>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
</div>
<h4 class="h5 text-muted mt-3">Bottom</h4>
<button>Open offcanvas</button>
<div id="offcanvasBottom">
  <div>
    <h5 id="offcanvasBottomLabel">Offcanvas</h5>
    <button></button>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
</div>

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Enable body scrolling</h4>
<button>Open offcanvas</button>
<div id="offcanvasScroll">
  <div>
    <h5 id="offcanvasScrollLabel">Offcanvas</h5>
    <button></button>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
</div>
<h4 class="h5 text-muted mt-3">Disable backdrop</h4>
<button>Open offcanvas</button>
<div id="offcanvasBackdrop">
  <div>
    <h5 id="offcanvasBackdropLabel">Offcanvas</h5>
    <button></button>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
</div>
<h4 class="h5 text-muted mt-3">Disable keyboard</h4>
<button>Open offcanvas</button>
<div id="offcanvasKeyboard">
  <div>
    <h5 id="offcanvasKeyboardLabel">Offcanvas</h5>
    <button></button>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.</p>
  </div>
</div>