title: Bootstrap: How to fixed-col without breaking the layout
body: <p>I've 3-col layout, and it works fine when all col are scrollable.
  But if I want the left, and right ones to be fixed on top, my layout breaks.</p>
  
  <p>I've seen many posts but nothing seems to work:
  <a href="https://stackoverflow.com/questions/45206216/how-to-disable-vertical-scroll-in-bootstrap-column">How to disable vertical scroll in bootstrap column</a></p>
  
  <p>I tried this, but my 3-col layout is gone when I set left, and right cols as fixed:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row  "  style="margin-top:70px" &gt;
      &lt;div class="col-sm-3 " style="position: fixed !important; "   &gt; 
  
          &lt;div class="card   "&gt;
  
            &lt;!--Card image--&gt;
            &lt;div class="view overlay"&gt;
              &lt;img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt=""&gt;
              &lt;a href="#"&gt;
                &lt;div class="mask rgba-white-slight"&gt;&lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;
  
            &lt;!--Card content--&gt;
            &lt;div class="card-body"&gt;
              &lt;!--Title--&gt;
              &lt;h4 class="card-title"&gt;Card title&lt;/h4&gt;
              &lt;!--Text--&gt;
              &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's
                content.&lt;/p&gt;
              &lt;a href="#" class="btn btn-primary"&gt;Button&lt;/a&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  
  
      &lt;div class="col-sm-6  " &gt; 
          &lt;div class="card  "&gt;
  
            &lt;!--Card image--&gt;
            &lt;div class="view overlay"&gt;
              &lt;img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt=""&gt;
              &lt;a href="#"&gt;
                &lt;div class="mask rgba-white-slight"&gt;&lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;
  
            &lt;!--Card content--&gt;
            &lt;div class="card-body"&gt;
              &lt;!--Title--&gt;
              &lt;h4 class="card-title"&gt;Card title&lt;/h4&gt;
              &lt;!--Text--&gt;
              &lt;p class="card-text"&gt;Top #1 to build on the card title and make up the bulk of the card's
                content.&lt;/p&gt;
              &lt;a href="#" class="btn btn-primary"&gt;Button&lt;/a&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;br/&gt;
  
          &lt;div class="card   "&gt;
  
            &lt;!--Card image--&gt;
            &lt;div class="view overlay"&gt;
              &lt;img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt=""&gt;
              &lt;a href="#"&gt;
                &lt;div class="mask rgba-white-slight"&gt;&lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;
  
            &lt;!--Card content--&gt;
            &lt;div class="card-body"&gt;
              &lt;!--Title--&gt;
              &lt;h4 class="card-title"&gt;Card title&lt;/h4&gt;
              &lt;!--Text--&gt;
              &lt;p class="card-text"&gt;Top #2 to build on the card title and make up the bulk of the card's
                content.&lt;/p&gt;
              &lt;a href="#" class="btn btn-primary"&gt;Button&lt;/a&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
      &lt;div class="col-sm-3 " style="position: fixed !important; "   &gt; 
          &lt;div class="card  "&gt;
            &lt;div class="view overlay"&gt;
              &lt;img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt=""&gt;
              &lt;a href="#"&gt;
                &lt;div class="mask rgba-white-slight"&gt;&lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;
  
            &lt;div class="card-body"&gt;
              &lt;h4 class="card-title"&gt;Card title&lt;/h4&gt;
              &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's
                content.&lt;/p&gt;
              &lt;a href="#" class="btn btn-primary"&gt;Button&lt;/a&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I expected left, right col fixed (non scrollable), and the center-col scrollable.</p>
  
  <p>When I use fixed-col I get <a href="https://i.stack.imgur.com/acpqr.jpg" rel="nofollow noreferrer">wrong layout</a></p>
  
  <p>And without fixed-col I get the expected layout (but it doesn't meet my requirement) <a href="https://i.stack.imgur.com/PWaMS.jpg" rel="nofollow noreferrer">layout-ok</a></p>
  
  <p>Why the  div col-   doesn't force everything inside it to follow Bootstrap grid layout?</p>