Bulma Show

Last Updated : 27 Jun, 2022

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= 
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> 
</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= 
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> 
</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>