How to hide element on small devices in Twitter Bootstrap ?
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.
< div class = "d-sm-none" >hide on small screens</ div > < div class = "d-xs-none" >hide on extra small screens</ div > < div class = "d-md-none" >hide on medium screens</ div > |
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.
Example:
<!DOCTYPE html> < html > < head > < title > Hide elements in Small devices </ title > <!-- Include bootstrap CDN CSS file--> < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity = "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin = "anonymous" /> <!-- Style to create button --> < style > .GFG { background-color: white; border: 2px solid black; color: green; padding: 5px 10px; text-align: center; display: inline-block; font-size: 20px; margin: 10px 30px; cursor: pointer; } </ style > </ head > < body > < h1 >w3wiki</ h1 > <!-- Adding link to the button on the onclick event --> <!-- Notice the .d-sm-none class that hides the button on small devices--> < button class = "GFG d-sm-none" onclick = "window.location.href = 'https://ide.w3wiki.net';" > Click Here </ button > </ body > </ html > |
Output (Mobile devices):
Before applying the .d-sm-none class:
After applying the .d-sm-none class:
Contact Us