Twitter Bootstrap makes extensive use of specific classes to achieve all the various kinds of functionalities.
- To hide elements on any arbitrary screen size, you can make use of a specific Bootstrap .d-none class.
- For small screen sizes, you can modify it to use .d-sm-none class
- For extra small screen sizes, you can modify it to use .d-none or .d-xs-none
- For medium screen devices, you can modify it to use .d-md-none
Basic Approach: Let us say we want to hide a particular div. All we need to do is to apply that div to the specific classes that we need according to our requirements. The classNames were listed above.
Efficient Approach: Let us say we want to hide a button “Click Here” on small device screens.
- Just target the desired element.
- Apply the class “d-sm-none”
- For visualization, it is depicted below the two instances – before applying the className and after applying the className.
- Before we have applied the className, we can see that the button is visible clearly.
- As soon as we apply the className, the button disappears from the small screen devices.
Output (Mobile devices):
Before applying the .d-sm-none class:
After applying the .d-sm-none class:
- How to Check Twitter Bootstrap is Loaded or not ?
- How to Automatically Close Alerts using Twitter Bootstrap ?
- Data-toggle attributes in Twitter Bootstrap
- How to use modal closing event in Twitter Bootstrap ?
- How to change the width and height of Twitter Bootstrap's tooltips?
- How to handle the modal closing event in Twitter Bootstrap?
- How to use complex HTML with twitter Bootstrap tooltip using jQuery ?
- How to change column to row on small display in Bootstrap 4 ?
- Image Replacement in Bootstrap using text-hide Class
- How to hide text-overflown as ellipsis using dynamic bootstrap cols ?
- How to hide an element when printing a web page using CSS?
- How to hide div element after few seconds in jQuery ?
- How to Hide an HTML Element in Mobile View using jQuery ?
- Bootstrap | Sizing an element with Examples
- BootStrap | Positioning an element with Examples
- How to use a div as content for Twitter's Popover?
- HTML | small Tag
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.