title: v4 bootstrap full height sidebar
body: <p>I using the latest version of bootstrap and my siderbar is too short and not full height.<br>
  You can view it from here: <a href="http://srv.sniperjum.com/sh1omi/bootstrap-dev/" rel="noreferrer">http://srv.sniperjum.com/sh1omi/bootstrap-dev/</a><br>
  CSS: <a href="http://srv.sniperjum.com/sh1omi/bootstrap-dev/css/style.css" rel="noreferrer">http://srv.sniperjum.com/sh1omi/bootstrap-dev/css/style.css</a> <br>
  This problem is from my CSS or is it a problem from the bootstrap? and how can I fix it?</p>
  
  <p><strong>CSS</strong> </p>
  
  <pre><code>li.active{
      background-color: #428bca;
  }
  li {
      padding-bottom: 5px;
      padding-top: 5px;
  }
  .sidebar{
      background-color: #f5f5f5;
      padding-right: 20px;
      padding-top: 20px;
  }
  
  /* Sidebar navigation */
  .nav-sidebar {
      margin-right: -21px; /* 20px padding + 1px border */
      margin-bottom: 20px;
      margin-left: -20px;
  }
  .nav-sidebar &gt; li &gt; a {
      padding-right: 20px;
      padding-left: 20px;
  }
  .nav-sidebar &gt; .active &gt; a,
  .nav-sidebar &gt; .active &gt; a:hover,
  .nav-sidebar &gt; .active &gt; a:focus {
      color: #fff;
      background-color: #428bca;
  }
  button{
      color: #fafafa
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;nav class="navbar navbar-dark navbar-full bg-inverse"&gt;
      &lt;button type="button" class="navbar-toggler" onclick="ToogleNavbar()"&gt;&amp;#9776;&lt;/button&gt;
  &lt;/nav&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="row" &gt;
          &lt;div class="col-sm-3 col-md-2 sidebar" id="Navbar"&gt;
              &lt;ul class="nav nav-sidebar"&gt;
                  &lt;li class='active'&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../notes"&gt;Notes&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../chat"&gt;Chat&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../rss"&gt;RSS&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2"&gt;\&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>