css - How can I hide an HTML element for xs screen with Bootstrap 5?

Question

 <ul class="container">
   <li class="row">
     <div class="col">
       <img width="390" src="#">
       <div>29&nbsp;€</div>
     </div>
     <div class="col d-none d-sm-block">
       <h3>Description</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
          incididunt ut labore et dolore magna aliqua.</p>
     </div>
     <div class="col">
       <h3>Jamie</h3>
       <button><span>View Item</span></button>
     </div>
   </li>
 </ul>

In the code above, using Bootstrap 5, I need to hide an element for xs screen using .d-none .d-sm-block classes. It's only working using .d-none .d-lg-block to hide for md, sm and xs.

How can I hide the element only for xs screen.

Thank you.

question from:https://stackoverflow.com/questions/65841775/how-can-i-hide-an-html-element-for-xs-screen-with-bootstrap-5

Answer 1

According to this documentation the following classes should do the trick:

.d-none .d-sm-block

.d-none hides the element on all screens .d-sm-block makes the element visible from sm upwards