title: Bootstrap: Prevent Scrolling in LG or larger, Enable Scrolling in MD or smaller
body: <p>I have a website that makes use of the Bootstrap 4 framework (v4.4.1). I applied CSS properties <code>height: 100%</code> in <code>HTML</code> and <code>body</code> with <code>overflow: hidden</code> to disable scrolling and makes the contents bounded in the browser window only (I don't have many contents). (I know I can use <code>h-100</code> bootstrap CSS class.</p>
  
  <p>I would like to re-enable scrolling in mobile screens (my definition of the mobile screen is MD breakpoint or smaller). How can I do so in Bootstrap's way? The traditional method I can think of is to remove the <code>height: 100%</code> and <code>overflow: hidden</code> dynamically during <code>onLoad()</code> as well as when the browser is resizing, but it seems it's not the Bootstrap way to do so.</p>
  
  <p>The minimal working codes are shown below:</p>
  
  <p><strong>HTML (only the body part)</strong></p>
  
  <pre><code>&lt;div class="container-fluid h-100"&gt;
      &lt;div class="row h-100 justify-content-center align-items-start"&gt;
          &lt;div class="col-12 col-sm-8 h-100 bg-info text-center" id="page1"&gt;
              &lt;p&gt;
                  Page 1&lt;br /&gt;
                  &lt;span class="btn btn-success" id="btn_page2"&gt;To Page 2&lt;/span&gt;
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-12 col-sm-8 h-100 bg-warning" id="page2"&gt;
              &lt;p&gt;
                  Page 2&lt;br /&gt;
                  &lt;span class="btn btn-success" id="btn_page3"&gt;To Page 3&lt;/span&gt;
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-12 col-sm-8 h-100 bg-info" id="page3"&gt;
              &lt;p&gt;
                  Page 3
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body {
      height: 100%;
      overflow: hidden;
  }
  
  body {
      font-family: 'Bebas Neue', cursive;
      background-color: #000;
      color: #FFF;
      margin: 0;
      padding: 0;
  }
  #page2, #page3 {
      display: none;
  }
  </code></pre>
  
  <p><strong>JS (actually not quite related, just for demo purpose)</strong></p>
  
  <pre><code>$(document).ready(function() {
      $('#btn_page2').click(function() {
          $('#page1').hide();
          $('#page2').show();
          $('#page3').hide();
      });
      $('#btn_page3').click(function() {
          $('#page1').hide();
          $('#page2').hide();
          $('#page3').show();
      });
  });
  </code></pre>
  
  <p>JSFiddle demo: <a href="https://jsfiddle.net/shivanraptor/xdj1f35e/15/" rel="nofollow noreferrer">https://jsfiddle.net/shivanraptor/xdj1f35e/15/</a></p>
  
  <p>The effects I would like to make are to display Page 1, 2 and 3 from top to bottom, and scroll like a long website in the screen with MD breakpoints or below.</p>