Bulma is an Open source CSS framework developed by Jeremy Thomas. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. It is an open-source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.
In this article, we are going to learn about the hidden property offered by Bulma.
Hide in Bulma: The hide is the special property offered by Bulma in which you can hide any content from the user if he changes its screen resolution. In simple words, if you decide to hide some data from the user then you can use this property. For example, if you have defined the breakpoint as only visible to large desktop resolution i.e when the user decreases the size of the resolution then the content will disappear.
Table of various hide properties that are offered by Bulma are listed below:
| Class |
Mobile Up to 768px |
Tablet Between 769px and 1023px |
Desktop Between 1024px and 1215px |
Widescreen Between 1216px and 1407px |
FullHD 1408px and above |
|---|---|---|---|---|---|
| is-hidden-mobile | Hidden | Visible | Visible | Visible | Visible |
| is-hidden-tablet-only | Visible | Hidden | Visible | Visible | Visible |
| is-hidden-desktop-only | Visible | Visible | Hidden | Visible | Visible |
| is-hidden-widescreen-only | Visible | Visible | Visible | Hidden | Visible |
Classes to hide up to or from a specific breakpoint: In simple words, some developer uses breakpoint to hide data and some uses them to display data.
| Class |
Mobile Up to 768px |
Tablet Between 769px and 1023px |
Desktop Between 1024px and 1215px |
Widescreen Between 1216px and 1407px |
FullHD 1408px and above |
|---|---|---|---|---|---|
| is-hidden-touch | Hidden | Hidden | Visible | Visible | Visible |
| is-hidden-tablet | Visible | Hidden | Hidden | Hidden | Hidden |
| is-hidden-desktop | Visible | Visible | Hidden | Hidden | Hidden |
| is-hidden-widescreen | Visible | Visible | Visible | Hidden | Hidden |
| is-hidden-fullhd | Visible | Visible | Visible | Visible | Hidden |
Other visibility helpers are listed below:
- is-invisible: This class is used to hide content.
- is-hidden: This class is used to hide elements.
- is-sr-only: This class is used to hide elements visually but keep the element available to be announced by a screen reader.
Example: In the below example, we have to make use of the is-hidden-mobile class. After applying this property, whenever the user decreases the resolution of the screen to its mobile then it will hide the content.
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<style>
body
{
margin-left:20px;
margin-right:20px;
text-align:center;
}
</style>
</head>
<body>
<h2 style="color:green;font-size:30px">GeeksforGeeks </h2>
<div class="select is-multiple is-hidden-mobile">
<select multiple size="8" style="margin-left:20px">
<option value="Nallasopara">Nallasopara</option>
<option value="Borivali">Borivali</option>
<option value="kandivali">kandivali</option>
<option value="Dadar">Dadar</option>
<option value="Churchgate">Churchgate</option>
<option value="Miraroad">Miraroad</option>
<option value="Dahisar">Dahisar</option>
<option value="Malad">Malad</option>
<option value="Grant Road">Grant Road</option>
<option value="Virar">Virar</option>
<option value="Nashik">Nashik</option>
<option value="Devlali">Devlali</option>
</select>
</div>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/helpers/visibility-helpers/