Bulma Visibility

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= 

'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 

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

'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 

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