title: Sticky Column in Bootstrap 4 That Doesn't Overlap Footer
body: <p>I have a page with multiple columns, a header, and a footer.  I want a column to scroll with the user, but not overlap the footer:</p>
  <pre><code>    &lt;html&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body&gt;
          &lt;div id=&quot;wrap&quot;&gt;
              &lt;div id=&quot;main&quot; class=&quot;clear-top&quot;&gt;
                  &lt;div class=&quot;col-lg-12&quot;&gt;
                      &lt;div class=&quot;row pl-4 justify-content-between pb-4&quot;&gt;
                          &lt;div class=&quot;col-lg-1 col-md-12 col-sm-12 &quot;&gt;
                           &lt;/div&gt;
  
                           &lt;div class=&quot;col-lg-7 col-md-12 col-sm-12 &quot;&gt;
                               ... Main Content ... 
                           &lt;/div&gt;
  
                           &lt;div class=&quot;col-lg-4 col-md-12 col-sm-12 p-4 sidebar-container&quot;&gt;
                              ... Content I want to Scroll with User ...
                           &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
      &lt;footer class=&quot;footer&quot;&gt;
          &lt;div class=&quot;container&quot;&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>// General Styling 
  html, body{
      height: 100%; 
  }
  
  #wrap {
      min-height: 100%;
  }
  
  #main {
      overflow:auto;
      padding-bottom:150px; /* this needs to be bigger than footer height*/
  }
  
  .footer {
      position: relative;
      margin-top: -150px; /* negative value of footer height */
      height: 150px;
      clear:both;
      padding-top:20px;
      width: 100%;
      bottom: 0; 
  } 
  </code></pre>
  <p>I'm using Bootstrap 4, so I've tried adding the <code>sticky-top</code> class to the column I want to scroll, however nothing changed.</p>
  <p>I've tried changing the <code>position</code> of the column to <code>sticky</code>, but again nothing seems to change.  Am I adding this to the wrong div?</p>