Open In App

Bulma Visibility

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma 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.

Visibility is one of the helper classes in Bulma that can show or hide the content depending on the viewport. There are so many classes that we can use to show or hide any content.

Showing the content: The following classes are used to show the content.

  • is-block
  • is-flex
  • is-inline
  • is-inline-block

is-flex helper classes:

  • is-flex-mobile: Flex will be applied only to mobiles with a width less than 748 px.
  • is-flex-tablet-only: Flex will be applied to tablet between 769px and 1023px
  • is-flex-desktop-only: Flex will be applied to desktop between 1024px and 1215px

Example: The following code demonstrates the is-flex-mobile class. Developers can use other classes as per the need.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Visibility</title>
    <link rel='stylesheet' href=
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
    <strong>Bulma Visibility</strong>
    <br> <br>
      
    <div class="is-flex-mobile">
        <p class="is-block">GeeksforGeeks text1 </p>
           
        <p class="is-block"> GeeksforGeeks text2</p>
    </div>
</body>
  
</html>


Output:

  • When the screen size is less than 748 px.

  • When screen size is greater than 748 px.

Hide content classes: We can use the following classes to hide the content according to the viewport.

  • is-hidden-mobile: It will hide the content in mobiles with a width less than 748 px.
  • is-hidden-tablet-only: It will hide the content in tablet between 769px and 1023px.
  • is-hidden-desktop-only: It will hide the content in desktop between 1024px and 1215px.
  • is-hidden-widescreen-only: It will hide the content in widescreen between 1216px and 1407px.

Example: The following code demonstrates the is-hidden-mobile class. Developers can use other classes as per the need.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Visibility</title>
    <link rel='stylesheet' href=
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
    <strong>Bulma Visibility</strong>
    <br> <br>
      
    <div class="is-hidden-mobile">
        <p class="is-block">GeeksforGeeks1</p>
           
        <p class="is-block">GeeksforGeeks2</p>
    </div>
</body>
  
</html>


Output:

  • When the screen size is less than 748 px (mobile size) then the content will be hidden.

  • When the screen size is greater than 748 px then content will be shown to users.



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