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=
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>GeeksforGeeks</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=
Click Here
</button>
</body>
</html>
|
Output (Mobile devices):
Before applying the .d-sm-none class:
After applying the .d-sm-none class: