Bootstrap 5 Learning Kit

   Copy to clipboard

   Open in CodePen

<h4 class="h5 text-muted mt-3">Button trigger</h4>
<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTrigger" aria-controls="offcanvasTrigger">Open offcanvas</button>
<h4 class="h5 text-muted mt-3">Link trigger</h4>
<a href="#offcanvasTrigger" role="button" class="btn btn-primary" data-bs-toggle="offcanvas" aria-controls="offcanvasTrigger">Open offcanvas</a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasTrigger" aria-labelledby="offcanvasTriggerLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTriggerLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <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 type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDark" aria-controls="offcanvasDark">Open offcanvas</button>
<div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <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 type="button" class="btn btn-primary d-sm-none" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSmall" aria-controls="offcanvasSmall">Open offcanvas</button>
<div class="offcanvas-sm offcanvas-start" tabindex="-1" id="offcanvasSmall" aria-labelledby="offcanvasSmallLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasSmallLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <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 type="button" class="btn btn-primary d-md-none" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMedium" aria-controls="offcanvasMedium">Open offcanvas</button>
<div class="offcanvas-md offcanvas-start" tabindex="-1" id="offcanvasMedium" aria-labelledby="offcanvasMediumLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasMediumLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <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 type="button" class="btn btn-primary d-lg-none" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLarge" aria-controls="offcanvasLarge">Open offcanvas</button>
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="offcanvasLarge" aria-labelledby="offcanvasLargeLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLargeLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <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 type="button" class="btn btn-primary d-xl-none" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExtraLarge" aria-controls="offcanvasExtraLarge">Open offcanvas</button>
<div class="offcanvas-xl offcanvas-start" tabindex="-1" id="offcanvasExtraLarge" aria-labelledby="offcanvasExtraLargeLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExtraLargeLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <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 type="button" class="btn btn-primary d-xxl-none" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExtraExtraLarge" aria-controls="offcanvasExtraExtraLarge">Open offcanvas</button>
<div class="offcanvas-xxl offcanvas-start" tabindex="-1" id="offcanvasExtraExtraLarge" aria-labelledby="offcanvasExtraExtraLargeLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExtraExtraLargeLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <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 type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasStart" aria-controls="offcanvasStart">Open offcanvas</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasStart" aria-labelledby="offcanvasStartLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasStartLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <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 type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd">Open offcanvas</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasEndLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <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 type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Open offcanvas</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <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 type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Open offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <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 type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScroll" aria-controls="offcanvasScroll">Open offcanvas</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasScroll" aria-labelledby="offcanvasScrollLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <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 type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBackdrop" aria-controls="offcanvasBackdrop">Open offcanvas</button>
<div class="offcanvas offcanvas-start" data-bs-backdrop="false" tabindex="-1" id="offcanvasBackdrop" aria-labelledby="offcanvasBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <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 type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasKeyboard" aria-controls="offcanvasKeyboard">Open offcanvas</button>
<div class="offcanvas offcanvas-start" data-bs-keyboard="false" tabindex="-1" id="offcanvasKeyboard" aria-labelledby="offcanvasKeyboardLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasKeyboardLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <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>