title: Side Nav Bar Open/Collapse and Container Resize
body: <p>So I'm using bootstrap to build a dashboard with a side nav bar. When the navbar is open, the container content is pushed to the right and out of the screen. I want the whole container to be resized to fit the screen. So whether navbar is open or collapsed, container should be fully visible. Is there a bootstrap css class I can add to body or container to fix that issue? </p>
  
  <pre><code>    &lt;body&gt;
          &lt;div id="wrapper"&gt;
          &lt;div class="overlay"&gt;&lt;/div&gt;
  
          &lt;!-- Sidebar --&gt;
          &lt;nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"&gt;
              &lt;ul class="nav sidebar-nav"&gt;
                  &lt;li class="sidebar-brand"&gt;
                      &lt;a href="#"&gt;&lt;img src="assets/img/logo.png"&gt;&lt;/img&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="overview.html"&gt;&lt;span class="icon icon-home"&gt;&lt;/span&gt;Overview&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt; &lt;span class="icon icon-suitcase"&gt;&lt;/span&gt;Account Management&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;&lt;span class="icon icon-bar-graph"&gt;&lt;/span&gt;Demand Planning&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;&lt;span class="icon icon-box"&gt;&lt;/span&gt;Inventory Planning&lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;a href="#"&gt;&lt;span class="icon icon-light-bulb"&gt;&lt;/span&gt;Vendor Management Invetory&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="dashboards.html"&gt;&lt;span class="icon icon-calculator"&gt;&lt;/span&gt;Dashboards&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;&lt;span class="icon icon-text-document"&gt;Reports&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;!-- /#sidebar-wrapper --&gt;
  
          &lt;!-- Page Content --&gt;
          &lt;div id="page-content-wrapper"&gt;
              &lt;button type="button" class="hamburger is-closed" data-toggle="offcanvas"&gt;
                  &lt;span class="hamb-top"&gt;&lt;/span&gt;
                  &lt;span class="hamb-middle"&gt;&lt;/span&gt;
                  &lt;span class="hamb-bottom"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;div class="container"&gt;
                  &lt;div class="dashhead"&gt;
        &lt;div class="dashhead-titles"&gt;
          &lt;div class="dashhead-toolbar"&gt;
              &lt;form class="navbar-form" role="search"&gt;
                  &lt;div class="input-group"&gt;
                  &lt;input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;h3 class="dashhead-title"&gt;Overview&lt;/h3&gt;
        &lt;/div&gt;    
      &lt;/div&gt;
                  &lt;ul class="nav nav-bordered mt-4 mt-md-2 mb-0 clearfix" role="tablist"&gt;
        &lt;li class="nav-item" role="presentation"&gt;
          &lt;a href="#traffic" class="nav-link active" role="tab" data-toggle="tab" aria-controls="traffic"&gt;Summary&lt;/a&gt;
        &lt;/li&gt; 
      &lt;/ul&gt;
  
      &lt;hr class="mt-0 mb-5"&gt;
  
      &lt;div class="tab-content"&gt;
        &lt;div role="tabpanel" class="tab-pane active" id="traffic"&gt;
          &lt;div class="row text-center m-t-md"&gt;
            &lt;div class="col-lg-4"&lt;/div&gt;
            &lt;/div&gt;
            &lt;/div&gt;
            &lt;/div&gt;
  
           &lt;style&gt;
  #sidebar-wrapper {
      z-index: 1000;
      left: 235px;
      width: 0;
      height: 100%;
      margin-left: -235px;
      overflow-y: auto;
      overflow-x: hidden;
      background: #252D3A;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;}
  
  #wrapper.toggled #sidebar-wrapper {
      width: 235px;}
  
  #wrapper.toggled #page-content-wrapper {
      position: absolute;
      margin-right: -235px;}
  
  #page-content-wrapper {
      width: 100%;
      padding-top: 20px;}
  
  #sidebar-nav {
      position: absolute;
      top: 0;
      width: 235px;
      margin: 0;
      padding: 0;
      list-style: none;}
   &lt;/style&gt;
  </code></pre>