TheLazy.Dev
Portfolio GitHub

Blog

codepen |css |bootstrap |javascript

Bootstrap Off Canvas

takaneichinose

Takane Ichinose

Posted on September 2, 2019

Bootstrap Off Canvas

Bootstrap Off Canvas

Just a simple implementation of off canvas on Bootstrap.

Basic Usage

Import these lines on your source code.

<link rel="stylesheet" href="css/bootstrap-off-canvas.css">
<script src="js/bootstrap-off-canvas.js"></script>
Enter fullscreen mode Exit fullscreen mode

Then wrap your usual Bootstrap code in these lines of HTML codes.

<div class="off-canvas-wrapper">
  <div id="offcanvasid" class="off-canvas">
    <div class="off-canvas-nav">
      <div class="nav nav-pills nav-fill flex-column">
        <a href="#" class="text-left nav-item nav-link active">Link 1</a>
        <a href="#" class="text-left nav-item nav-link">Link 2</a>
        <a href="#" class="text-left nav-item nav-link disabled">Disabled Link</a>
      </div>
      <div class="off-canvas-content" data-target="#offcanvasid">
        <a href="#" class="off-canvas-toggler" type="button" data-target="#offcanvasid" aria-controls="offcanvasSupportedContent" aria-expanded="false" aria-label="Toggle off canvas menu">Toggle off canvas</a>
        <!-- Your usual Bootstrap code goes here -->
        <div class="container">
          ...
        </div>
      </div>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Options

In `off-canvas-nav` class, you may use the Bootstrap's Colors utility:

Colors

In `off-canvas-content` class, you may add `overlay` class to add overlay mask on the content part of your source code.

The repository

Please click the link below to go to my Github repository

GitHub logo takaneichinose / bootstrap-off-canvas

Just a simple implementation of off canvas on Bootstrap.

Bootstrap Off Canvas

Just a simple implementation of off canvas on Bootstrap.

Basic Usage

Import these lines on your source code.

<link rel="stylesheet" href="css/bootstrap-off-canvas.css">
<script src="js/bootstrap-off-canvas.js"></script>
Enter fullscreen mode Exit fullscreen mode

Then wrap your usual Bootstrap code in these lines of HTML codes.

<div class="off-canvas-wrapper">
  <div id="offcanvasid" class="off-canvas">
    <div class="off-canvas-nav">
      <div class="nav nav-pills nav-fill flex-column">
        <a href="#" class="text-left nav-item nav-link active">Link 1</a>
        <a href="#" class="text-left nav-item nav-link">Link 2</a>
        <a href="#" class="text-left nav-item nav-link disabled">Disabled Link</a>
      </div>
      <div
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

Conclusion

In someone want to use this, you may use this as you please. I think, there is still a big room for improvements, so if anyone of you found a bug, or have a suggestion for feature improvement, please comment down below.

Demo

💖 💪 🙅 🚩
takaneichinose
Takane Ichinose

Posted on September 2, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Bootstrap Off Canvas
codepen Bootstrap Off Canvas

September 2, 2019