JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="testheader"></div>

		<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!--<a class="navbar-brand" href="#">Project name</a>-->
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div><!-- /.navbar -->

    <div class="container">
      <div class="row row-offcanvas row-offcanvas-left">
          <div class="row-offcanvas row-offcanvas-right">
            <div class="col-xs-18 col-sm-10">
						
			  <!--p class="pull-left visible-xs">
                <button class="btn btn-primary btn-xs" type="button" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-left"></i></button>
              </p-->
<!--
              <p class="pull-right visible-xs">
                <button class="btn btn-primary btn-xs" type="button" data-toggle="offcanvasright"><i class="glyphicon glyphicon-chevron-right"></i></button>
              </p>-->
							
              <!--<div class="jumbotron">
                <h1>Hello, world!</h1>
                <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range...

CSS

body {
  /*padding-top: 70px;*/
}
footer {
  /*padding-left: 15px;
  padding-right: 15px;*/
}

/* Off Canvas */

@media screen and (max-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
  }

  .row-offcanvas-left
  #sidebarLeft {
    left: -40%;
  }

  .row-offcanvas-left.active {
    left: 40%;
  }
 
  .row-offcanvas-right 
  #sidebarRight {
    right: -40%;
  }

  .row-offcanvas-right.active {
    right: 40%;
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 40%;
    margin-left: 10px;
  }
}

.testheader { height: 110px; width: 100%; background: #fff; }
.navbar { position: relative; }
footer { min-height: 300px; }

JavaScript

$('[data-toggle=offcanvas]').click(function() {
  $('.row-offcanvas-left').toggleClass('active');
});

$('[data-toggle=offcanvasright]').click(function() {
  $('.row-offcanvas-right').toggleClass('active');
});