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"?

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.




Edit this Article
ebook FrontEnd Html5 Boostrap Display property Hide div on small screen hide div on mobile show div on large screen Technology published
Was this page helpful?
Yes Yes! this solution to the problem was helpful. No No! this solution to the problem was not helpful.. Leave ErnesTech Feedback.Feedback
If you log in, you will be notified when someone leaves a comment.

Other users would like to know if this solution helped you.
Your Session is Ending
Login to Continue


© 2021 - ErnesTech - Privacy