Skip to content
Related Articles

Related Articles

Bulma Show

View Discussion
Improve Article
Save Article
  • Last Updated : 27 Jun, 2022
View Discussion
Improve Article
Save Article

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. In this article, we will learn how we can make a website responsive using show property. 

Bulma Show is a responsive property that is offered by the Bulma framework. When you change the resolution of the screen then the content will flex and try to fit into the website to look good otherwise it will hide and show accordingly. 

Bulma Show Classes:

  • is-block: This class is used to display elements in the block.
  • is-flex: This class is used to display elements in flex.
  • is-inline: This class is used to display elements in-line.
  • is-inline-block: This class is used to display elements inline-block.
  • is-inline-flex: This class is used to display elements inline-flex.
Class Mobile
Up to 768px
Tablet
Between 769px and 1023px
Desktop
Between 1024px and 1215px
Widescreen
Between 1216px and 1407px
FullHD
1408px and above
  Flex  Unchanged  Unchanged  Unchanged  Unchanged 
is-flex-tablet-only  Unchanged  Flex  Unchanged  Unchanged  Unchanged 
is-flex-desktop-only  Unchanged  Unchanged  Flex  Unchanged  Unchanged 
is-flex-widescreen-only  Unchanged  Unchanged  Unchanged  Flex  Unchanged 

Classes to display up to or from a specific breakpoint:

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-flex-touch  Flex  Flex  Unchanged  Unchanged  Unchanged 
is-flex-tablet  Unchanged  Flex  Flex  Flex  Flex 
is-flex-desktop  Unchanged  Unchanged  Flex  Flex  Flex 
is-flex-widescreen  Unchanged  Unchanged  Unchanged  Flex  Flex 
is-flex-fullhd  Unchanged  Unchanged  Unchanged  Flex  Flex 

Syntax:

<element-name class="class-name">
    ...
</element-name>

Example 1: In the below code we will see the responsive behavior.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
                "width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
</head>
  
<body>
    <h2 class="has-text-centered has-text-success">
        GeeksforGeeks 
    </h2>
    <h3 class="has-text-centered ">
        A computer science portal for geeks 
    </h3><br>
  
    <div class="columns is-flex-tablet-only    ">
        <div class="column has-background-success 
                    has-text-black  has-text-centered" id="gfg">
            GFG
        </div><br>
        <div class="column has-background-success 
                    has-text-black  has-text-centered" id="gfg">
            GFG
        </div>
    </div>
</body>
  
</html>


Output:

 

Example 2: In the below code we will see the responsive behavior.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
                "width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
</head>
  
<body>
    <h2 class="has-text-centered has-text-success">
        GeeksforGeeks 
    </h2>
    <h3 class="has-text-centered ">
        A computer science portal for geeks 
    </h3><br>
  
    <div class="columns is-flex-tablet-only    ">
        <div class="column has-background-success 
                has-text-black  has-text-centered" id="gfg">
            1
        </div><br>
        <div class="column has-background-success 
                has-text-black  has-text-centered" id="gfg">
            2
        </div><br>
        <div class="column has-background-success 
                has-text-black  has-text-centered" id="gfg">
            3
        </div><br>
        <div class="column has-background-success 
                has-text-black  has-text-centered" id="gfg">
            4
        </div><br>
        <div class="column has-background-success 
                has-text-black  has-text-centered" id="gfg">
            5
        </div><br>
        <div class="column has-background-success 
                has-text-black  has-text-centered" id="gfg">
            6
        </div><br>
        <div class="column has-background-success 
                has-text-black  has-text-centered" id="gfg">
            7
        </div><br>
        <div class="column has-background-success 
                has-text-black  has-text-centered" id="gfg">
            8
        </div><br>
        <div class="column has-background-success 
                    has-text-black  has-text-centered" id="gfg">
            9
        </div><br>
    </div>
</body>
  
</html>


Output:

 

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!