9

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?

dippas
  • 58,591
  • 15
  • 114
  • 126
JimF
  • 193
  • 1
  • 2
  • 7

1 Answers1

29

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>
dippas
  • 58,591
  • 15
  • 114
  • 126
  • I was at: https://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 – JimF Jun 14 '18 at 11:15
  • 1
    same thing in v4.0 or v4.1 – dippas Jun 14 '18 at 11:16
  • 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) { ... } https://getbootstrap.com/docs/4.1/layout/overview/ – JimF Jun 14 '18 at 11:30
  • 2
    "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 Jun 14 '18 at 12:14
  • 1
    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
    col-sm-3
     – JimF Jun 14 '18 at 12:35