<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> <div class="alert alert-dismissible alert-info"><button type="button" class="close" data-dismiss="alert">X</button> <strong>IMPORTANT!</strong> View in fullscreen, since it doesn't work properly in the preview window.</div> </div> </div> <div class="row"> <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> <div class="card"> <div class="card-header">Bootstrap V4 new hidden system</div> <div class="card-body"> <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> <hr/> <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> <hr/> <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> </div> </div> </div> </div> </div>