Bulma Tiles Modifiers

Last Updated : 28 Feb, 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.

Tile in Bulma framework is a single element class with the help of which we can create two-dimensional layouts or metro-like grids, etc.

There will be instances when we have to manipulate our tiles in a certain way in order to achieve the desired result. This can be done by using the Tile Modifiers. Let us learn tile modifiers and understand how they can be used and what manipulations they can perform on our tiles.

The tile element has a total of 16 modifiers. There are 3 contextual modifiers, 1 directional modifier, and 12 size modifiers from is-1 to is-12 classes. The classes are listed below in the respective mentioned order.

Bulma Tiles modifier classes:

is-ancestor: It is the beginning of the tile. This modifier wraps other tiles.
is-parent: It is a modifier, that comes below the is-ancestor modifier.
is-child: It is a modifier, that comes below the is-parent modifier.
is-vertical: This class makes the tile vertical.
is-1: It is a size modifier class that starts from is-1 to is-12 class.

Syntax:

<div class="tile is-ancestor">
    <div class="tile is-vertical is-2">
        ...
    </div>
    ...
</div>

Example 1: let us have a look at a program that includes all the three types of modifiers that have been discussed above.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale = 1"> 
    <title>Bulma Tiles Example</title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> 
    <script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"> 
    </script> 
  
    <style> 
        body { 
            margin-left: 20px; 
            margin-right: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="content" style="text-align:center;"> 
        <h1 class="has-text-success">GeeksforGeeks</h1> 
        <strong>Tile Modifiers</strong> 
    </div> 
  
    <div class="container"> 
        <div class="tile is-ancestor"> 
            <div class="tile is-vertical is-3"> 
                <div class="tile is-child notification  
                        has-text-success has-background-dark"> 
                    <p class="title">This tile is Vertical</p> 
                    <div class="content"> 
                        We are vertical! 
                    </div> 
                    <br> 
                </div> 
            </div> 
  
            <div class="tile is-parent"> 
                <div class="tile is-child notification  
                    has-text-success has-background-dark"> 
                    <p class="title">Middle Tile</p> 
                    <div class="content"> 
                        We are middle! 
                    </div> 
                    <br> 
                </div> 
            </div> 
        </div> 
  
        <div class="tile is-parent"> 
            <div class="tile is-child notification  
                has-text-success has-background-dark"> 
                <p class="title">Wide tile</p> 
                <div class="content"> 
                    We are wide! 
                </div> 
                <br> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

Example 2: The following code also demonstrates the above tile modifier classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale = 1"> 
    <title>Bulma Tiles Example</title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> 
    <script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"> 
    </script> 
    <style> 
        body { 
            margin-left: 20px; 
            margin-right: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="content" style="text-align:center;"> 
        <h2 class="has-text-success">GeeksforGeeks</h2> 
        <strong>Tile Modifiers</strong> 
    </div> 
  
    <div class="container"> 
  
        <div class="tile is-ancestor"> 
            <div class="tile is-4 is-vertical is-parent"> 
                <div class="tile is-child box notification  
                              has-background-dark has-text-success"> 
                    <p class="title">Tile 1</p> 
  
                    <p> 
                        CSS (Cascading Style Sheets) is a  
                        stylesheet language used to design  
                        the webpage to make it attractive. 
                    </p> 
                </div> 
                  
                <div class="tile is-child box notification   
                             has-background-dark has-text-success"> 
                    <p class="title">Tile 2</p> 
  
                    <p> 
                        The reason for using this is to simplify the 
                        process of making web pages presentable. 
                    </p> 
                </div> 
            </div> 
  
            <div class="tile is-parent"> 
                <div class="tile is-child box notification  
                             has-background-dark has-text-success"> 
                    <p class="title">Tile 3</p> 
  
                    <p> 
                        More importantly, it enables you to do 
                        this independent of the HTML that  
                        makes up each web page. 
                    </p> 
  
                    <p> 
                        It is the basic structure of HTML webpage  
                        and we use CSS style inside webpage. In  
                        a web page, we use internal CSS (i.e.  
                        adding CSS code inside head tag of HTML  
                        code). 
                    </p> 
  
                    <p> 
                        It is the combination of Hypertext and  
                        Markup language. Hypertext defines the  
                        link between the web pages 
                    </p> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html> 