<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">
</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>
<hr>
<footer>
- <p>© Company 2014</p>
+ <p>© Company 2017</p>
</footer>
</div><!--/.container-->
}
.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 */
}