title: How to use bootstrap navbar and sidebar? (Components Overlapping)
body: <blockquote>
    <p>I want to have a navbar and sidebar always. But when trying to add
    more components to my screen, my sidebar overlaps everything else. How
    do I fix this?</p>
    
    <p>app-component html:</p>
  </blockquote>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;app-sidebar&gt;&lt;/app-sidebar&gt;
  &lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
        &lt;app-articles&gt;&lt;/app-articles&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>Sidebar html:</p>
  </blockquote>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar"&gt;
        &lt;ul class="nav nav-pills flex-column"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link active" href="#"&gt;Workouts &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;User History&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Tools&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Recipes&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p>Articles html:</p>
  </blockquote>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-9"&gt;
    &lt;br&gt;
    &lt;div class="jumbotron"&gt;
      &lt;a href="#" class="visible-xs" data-toggle="offcanvas"&gt;&lt;i class="fa fa-lg fa-reorder"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;h1&gt;Hello, world!&lt;/h1&gt;
      &lt;p&gt;This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-6 col-sm-6 col-lg-4"&gt;
        &lt;h2&gt;Heading&lt;/h2&gt;
        &lt;p&gt;Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap
          friendly HTML, CSS and Javascript.&lt;/p&gt;
        &lt;p&gt;&lt;a class="btn btn-default" href="#"&gt;View details »&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;!--/span--&gt;
      &lt;div class="col-6 col-sm-6 col-lg-4"&gt;
        &lt;h2&gt;Heading&lt;/h2&gt;
        &lt;p&gt;Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript. Bootstrap is a front-end framework that uses CSS and JavaScript to
          facilitate responsive Web design. &lt;/p&gt;
        &lt;p&gt;&lt;a class="btn btn-default" href="#"&gt;View details »&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;!--/span--&gt;
  
      &lt;div class="col-6 col-sm-6 col-lg-4"&gt;
        &lt;h2&gt;Heading&lt;/h2&gt;
        &lt;p&gt;Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap
          friendly HTML, CSS and Javascript.&lt;/p&gt;
        &lt;p&gt;&lt;a class="btn btn-default" href="#"&gt;View details »&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;!--/span--&gt;
      &lt;div class="col-6 col-sm-6 col-lg-4"&gt;
        &lt;h2&gt;Heading&lt;/h2&gt;
        &lt;p&gt;Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap
          friendly HTML, CSS and Javascript.&lt;/p&gt;
        &lt;p&gt;&lt;a class="btn btn-default" href="#"&gt;View details »&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;!--/span--&gt;
    &lt;/div&gt;
    &lt;!--/row--&gt;
  &lt;/div&gt;
  &lt;!--/span--&gt;
  </code></pre>
  
  <blockquote>
    <p>I am new to bootstrap (and web programming in general) so I'm sure
    this is just a noob mistake. I've been toying with the container
    (adding and removing container on the sidebar html) and also messing
    with the grid layout. But I cannot figure out how to always have the
    sidebar and navbar and then always adjust for it no matter what my
    template is adding on.</p>
    
    <p>Here is my CSS in case that is needed</p>
  </blockquote>
  
  <pre><code>body {
    background-color: #dfe3ee;
  }
  body.sidebar {
    background-color: #f7f7f7;
  }
  .navbar-default {
    background-color: #3b5998;
    width: 100%;
  }
  /* Title */
  .navbar-default .navbar-brand {
    color: white;
  }
  .navbar-default .navbar-nav &gt; li &gt; a {
    color: white;
  }
  
  /*footer {*/
    /*padding-left: 15px;*/
    /*padding-right: 15px;*/
  /*}*/
  
  /*
   * Base structure
   */
  
  /* Move down content because we have a fixed navbar that is 50px tall */
  
  /*
   * Sidebar
   */
  
  .sidebar {
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    border-right: 1px solid #eee;
  }
  
  /* Sidebar navigation */
  .sidebar {
    padding-left: 0;
    padding-right: 0;
    background-color: white;
  }
  
  .sidebar .nav {
    margin-bottom: 20px;
  }
  
  .sidebar .nav-item {
    width: 100%;
  }
  
  .sidebar .nav-item + .nav-item {
    margin-left: 0;
  }
  
  .sidebar .nav-link {
    border-radius: 0;
  }
  
  /*
   * Dashboard
   */
  
  /* Placeholders */
  .placeholders {
    padding-bottom: 3rem;
  }
  
  .placeholder img {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  
  
  /*
   * off Canvas sidebar
   * --------------------------------------------------
   */
  /*@media screen and (max-width: 768px) {*/
    /*.row-offcanvas {*/
      /*position: relative;*/
      /*-webkit-transition: all 0.25s ease-out;*/
      /*-moz-transition: all 0.25s ease-out;*/
      /*transition: all 0.25s ease-out;*/
      /*width:calc(100% + 220px);*/
    /*}*/
  
    /*.row-offcanvas-left*/
    /*{*/
      /*left: -220px;*/
    /*}*/
  
    /*.row-offcanvas-left.active {*/
      /*left: 0;*/
    /*}*/
  
    /*.sidebar-offcanvas {*/
      /*position: absolute;*/
      /*top: 0;*/
    /*}*/
  /*}*/
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/iWVcq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iWVcq.png" alt="enter image description here"></a></p>