Open In App

Bulma Hide

Last Updated : 06 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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/



Similar Reads

How to hide an element when printing a web page using CSS?
The media query is used to hide an element when printing web pages. Use @media print query and set the visibility hidden to that element that needs to hide at printing. Example 1: In this example, hide the element h1 at printing time. To hide the element h1 use media query and set visibility:hidden. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt;
1 min read
How to Hide Option in Select Menu with CSS ?
In HTML, the &lt;select&gt; tag creates a drop-down list of options for the user to choose from. Sometimes, you may want to hide certain options from the user for various reasons. This can be achieved using CSS by applying the display: none property to the &lt;option&gt; tag that you want to hide. Syntax: select option[value="value-to-hide"] { disp
2 min read
jQuery | Hide/Show, Toggle and Fading methods with Examples
jQuery provides a trivially simple interface for doing various kind of amazing effects. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration. jQuery hide() and show() jQuery hide() : Hides the Syntax or the element of html that you want to hide.$(selector).hide(speed, callback); jQuery show() : Shows the synta
3 min read
jQuery UI Tooltips hide option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI tooltip widget helps us to add new themes and allows for customization. In this article, we will see how to use hide option in jQuery UI tooltip. The hide option is used to
3 min read
How to hide span element if anchor href attribute is empty using JavaScript ?
The task is to hide the &lt;span&gt; tag when href attribute of &lt;a&gt; tag is not present or invalid. Let us consider we have &lt;a&gt; tag inside the &lt;span&gt; tag. It will look similar to this: &lt;span&gt;&lt;a href="www.google.com"&gt;&lt;/a&gt;&lt;/span&gt; Now we add the id to the elements to identify them. &lt;span id="outer"&gt;&lt;a
2 min read
React Suite Tooltip Hide Arrow Indicator
React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we’ll learn about React suite Tooltip Hide Arrow Indicator. The tooltip component allows users to
4 min read
Hide scroll bar, but while still being able to scroll using CSS
To hide the scrollbar use -webkit- because it is supported by major browsers (Google Chrome, Safari or newer versions of Opera). There are many other options for the other browsers which are listed below: -webkit- (Chrome, Safari, newer versions of Opera): .element::-webkit-scrollbar { width: 0 !important } -moz- (Firefox): .element { overflow: -mo
3 min read
Image Replacement in Bootstrap using text-hide Class
Bootstrap allows us to replace the text with background image for any text element like paragraph element, heading element etc. With the use of .text-hide class, we can replace an element’s content with a background image. Syntax: &lt;element class = "text-hide" style = "background-image: url('Specify URL of image here');"&gt; &lt;/element&gt; In t
1 min read
AngularJS ng-hide Directive
The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element. If the expression given in the ng-hide attribute is true then the HTML elements hide. In AngularJS there is a predefined class named ng-hide which is used to set the display to none. Syntax: &lt;element ng-hide="expression"&gt; Contents... &lt;/element&gt; Parame
2 min read
Hide the Email Id in a form using HTML and JavaScript
Here the following task is going to be formed with HTML code: 1.Input field: We are going to enter the email id in this field. 2.Button: On clicking this button hidden email id will be displayed. 3.Output field: Field to display hidden email id. Examples: Input :robin_singh@gmail.com Output :robin*****@gmail.com Input :geeksforgeeks@gmail.com Outpu
1 min read
Article Tags :