Hide a column on smaller screens for Bootstrap 4

Question

This is one area that always confuses me with Bootstrap 4

Say you have this layout:

  <div class="container-fluid">     
   <div class="row">
     <div class="col-sm-3">col-sm-3</div>
     <div class="col-sm-9">col-sm-9</div>
   </div>
  </div>

What classes do you to assign ( most likely to the col-sm-3 ) such that the col-sm-3 is hidden on: xs, sm and md ?

In other words and just to be clear I only want the col-sm-3 to show up on lg and xl screens?

Solution

You have to use display utilities classes, in this case:

d-none d-lg-block: hide on screens smaller than lg

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">     
   <div class="row">
     <div class="col-sm-3 d-none d-lg-block">col-sm-3</div>
     <div class="col-sm-9">col-sm-9</div>
   </div>
  </div>

Comments

[JimF]

I was at: getbootstrap.com/docs/4.0/utilities/display and could not make heads or tails of it. Your solution seems to work fine. I will test some more too. Thanks Jim

[dippas]

same thing in v4.0 or v4.1

[JimF]

OK it works fine. I was also testing my page with a jQuery .resize function and the col-sm-3 gets hidden right around 992 going down to 991 pixels. And in fact here it is in the docs. // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } getbootstrap.com/docs/4.1/layout/overview

[JimF]

"This question has been asked before and already has an answer". This is different in that it gets right to the point. And is easily understood. While the Missing visible-** and hidden-** in Bootstrap v4 most likely provides a thorough and exhaustive explanation of all cases, I am still having trouble with it. If the purpose of SO is to convey knowledge from one person to another I believe the question I asked and the way it was answered is crystal clear.

[JimF]

Actually there is more here. If the question was, " I only want the col-sm-3 to show up on md, lg and xl screens" Dippas actually answered that question too! It would be <div class="col-sm-3 d-none d-md-block">col-sm-3</div>