Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma Hide

Improve Article
Save Article
  • Last Updated : 06 Jun, 2022
Improve Article
Save Article

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=
    <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/


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!