How to Hide a Div on a Small Screen using Boostrap 5

Question: I have followed the examples on the Boostrap website regarding Display Property but that did not work. My question is "how do you hide a div on a small screen and show it on a large screen"?


Login to See the Rest of the Answer

Answer: The answer is simple, make sure you indicate that the div should not display at all, then explicitly specify what medium or screen sizes the div should show. Take a look at the example below.

 <div class="col-2 text-muted d-none d-sm-none  d-lg-block ">
            <h5 class="sticky-top bg-white p-2 border rounded text-center">My Header Here</h5>
            <div>

              //Your Content Comes Here
            </div>

        </div>

[Note]: If this does not help take a look at the similar article I wrote here.