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>

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>

---

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

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>

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

…

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