Bootstrap 4 responsive utilities

Posted by Cătălin on Mon, 2 Oct 2017

Bootstrap 4 .hidden-* classes were completely removed

With Bootstrap 4 .hidden-* classes were completely removed. Starting with v4-beta, you can combine .d-*-none and .d-*-block classes to achieve the same result. visible-* was removed as well; instead of using explicit .visible-* classes, make the element visible by not hiding it (again, use combinations of .d-none .d-md-block)


  <div class="d-none d-sm-block"> hidden-xs		
    <div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
      <div class="d-none d-lg-block"> visible-lg and up  (hidden-md and down)
        <div class="d-none d-xl-block"> visible-xl
        </div>
      </div>
    </div>
  </div>
  
  
  <strong>
    <div class="d-sm-none"> eXtra Small <576px </div>
    <div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
    <div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
    <div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
    <div class="d-none d-xl-block"> eXtra Large ≥1200px </div>
  </strong>
    

  <div class="d-xl-none"> hidden-xl (visible-lg and down)			
    <div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
      <div class="d-md-none d-lg-none d-xl-none"> visible-sm and down  (or hidden-md and up)
        <div class="d-sm-none"> visible-xs
        </div>
      </div>
    </div>
  </div>

web

Articles & Code Snippets

Bootstrap 4 responsive utilities

Posted by Cătălin on Mon, 2 Oct 2017

Bootstrap 4 .hidden-* classes were completely removed

Archives

Articles & Snippets