Open In App

Bulma Other Visibility Helpers

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free and open-source CSS framework based on flexbox. It comes with pre-styled components so we don’t have to write everything from the ground up and hence cutting the development time of websites. In this article, we will be using Bulma visibility helpers other than show and hide helpers.

Bulma Other Visibility Helpers Classes:

  • is-invisible: This class adds visibility hidden to the HTML element on which it is applied.
  • is-hidden: This class is used to hide the element from the frontend as well as screen readers.
  • is-sr-only: This class is used to hide the element from the frontend but doesn’t hide the element from screen readers.

Syntax:

<element class="Other-Visibility-Helpers-Classes">
   ...
</element>

Example 1: The below example shows how to use the is-invisible class discussed above. Here the second button has been hidden using visibility: hidden property of CSS.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Other Visibility Helpers</title>
    <link rel='stylesheet'
          href=
  
    <style>
        p{
            margin-top: 30px;
            margin-bottom: 10px;
        }
  
        .button{
            margin: 0 auto;
        }
    </style>
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
      GeeksforGeeks
    </h1>
    <b>Bulma Other Visibility Helpers</b>
  
    <div class="container">
        <p>
          <b>Button without 
              <code>is-invisible</code> modifier:
           </b>
        </p>
  
        <button class="button is-primary">
          Visible Button
        </button>
        <p>
          <b>Button without 
            <code>is-invisible</code> modifier:
          </b>
        </p>
  
        <button class="button is-primary is-invisible">
          Invisible Button
        </button>
    </div>
</body>
  
</html>


Output:

Bulma Other Visibility Helpers

Bulma Other Visibility Helpers

Example 2: The below example shows how to use the is-hidden class discussed above. Here the second button has been hidden from the user as well as screen readers.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Other Visibility Helpers</title>
    <link rel='stylesheet' 
          href=
  
    <style>
        p{
            margin-top: 30px;
            margin-bottom: 10px;
        }
  
        .button{
            margin: 0 auto;
        }
    </style>
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
      GeeksforGeeks
    </h1>
    <b>Bulma Other Visibility Helpers</b>
  
    <div class="container">
        <p>
          <b>Button without 
            <code>is-hidden</code> modifier:
          </b>
        </p>
  
        <button class="button is-primary">
          Normal Button
        </button>
        <p>
          <b>Button without 
            <code>is-hidden</code> modifier:
          </b>
        </p>
  
        <button class="button is-primary is-hidden">
          Hidden Button
        </button>
    </div>
</body>
  
</html>


Output:

Example 3:  The example below illustrates the use of the is-sr-only modifier. Here the second button is hidden from the frontend but screen readers can read that button.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Other Visibility Helpers</title>
    <link rel='stylesheet' 
          href=
  
    <style>
        p{
            margin-top: 30px;
            margin-bottom: 10px;
        }
  
        .button{
            margin: 0 auto;
        }
    </style>
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
      GeeksforGeeks
    </h1>
    <b>Bulma Other Visibility Helpers</b>
  
    <div class="container">
        <p><b>
          Button without 
          <code>is-sr-only</code> modifier:
        </b></p>
  
        <button class="button is-primary">
          Normal Button
        </button>
        <p><b>
          Button without 
          <code>is-sr-only</code> modifier:
        </b></p>
  
        <button class="button is-primary is-sr-only">
          Only for Screen Reader Button
        </button>
    </div>
</body>
  
</html>


Output:

Bulma Other Visibility Helpers

Bulma Other Visibility Helpers

Reference: https://bulma.io/documentation/helpers/visibility-helpers/#other-visibility-helpers



Last Updated : 17 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads