diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html
index 8c8649271..7036277e2 100644
--- a/docs/examples/offcanvas/index.html
+++ b/docs/examples/offcanvas/index.html
@@ -57,8 +57,8 @@
 
       <div class="row row-offcanvas row-offcanvas-right">
 
-        <div class="col-12 col-sm-9">
-          <p class="float-right hidden-sm-up">
+        <div class="col-12 col-md-9">
+          <p class="float-right hidden-md-up">
             <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
           </p>
           <div class="jumbotron">
@@ -99,7 +99,7 @@
           </div><!--/row-->
         </div><!--/span-->
 
-        <div class="col-6 col-sm-3 sidebar-offcanvas" id="sidebar">
+        <div class="col-6 col-md-3 sidebar-offcanvas" id="sidebar">
           <div class="list-group">
             <a href="#" class="list-group-item active">Link</a>
             <a href="#" class="list-group-item">Link</a>
@@ -118,7 +118,7 @@
       <hr>
 
       <footer>
-        <p>&copy; Company 2014</p>
+        <p>&copy; Company 2017</p>
       </footer>
 
     </div><!--/.container-->
diff --git a/docs/examples/offcanvas/offcanvas.css b/docs/examples/offcanvas/offcanvas.css
index 2a72199d5..6047cb304 100644
--- a/docs/examples/offcanvas/offcanvas.css
+++ b/docs/examples/offcanvas/offcanvas.css
@@ -34,11 +34,21 @@ footer {
   }
 
   .row-offcanvas-right
+  .sidebar-offcanvas {
+    right: -100%; /* 12 columns */
+  }
+
+  .row-offcanvas-right.active
   .sidebar-offcanvas {
     right: -50%; /* 6 columns */
   }
 
   .row-offcanvas-left
+  .sidebar-offcanvas {
+    left: -100%; /* 12 columns */
+  }
+
+  .row-offcanvas-left.active
   .sidebar-offcanvas {
     left: -50%; /* 6 columns */
   }