Bulma Hide

Last Updated : 06 Jun, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport"
          content="width=device-width, initial-scale=1"> 
      
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> 
    <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> 