Bulma Nesting Tiles

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 about Nesting tiles with the help of Bulma CSS.

Nesting Tiles: Tiles are used to divide the webpage into several parts of different sizes.

Class Used:

title: This class is used to divide the webpage into different sizes.

Syntax:

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

Example 1: In the below code, we will make use of the title class.

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"> 
  
    <style> 
        .tile { 
            background-color: lightgreen; 
            border: 2px solid green; 
        } 
  
        body { 
            margin: 15px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;font-size:36px"> 
              GeeksforGeeks</h1><br> 
          
        <div class="tile">GFG</div> 
    </center> 
</body> 
  
</html>

Output:

Example 2: In the below code we will make use of the title class to segregate the webpage into several parts.

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"> 
  
    <style> 
        .columns { 
            background-color: lightgreen; 
            border: 2px solid green; 
        } 
  
        body { 
            margin-left: 15px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;font-size:36px"> 
              GeeksforGeeks</h1><br> 
        <div class="tile is-ancestor"> 
            <div class="tile is-vertical is-8"> 
                <div class="tile"> 
                    <div class="tile is-parent is-vertical"> 
                        <article class="tile is-child  
                                        notification is-primary"> 
                            <p class="title">Header Tile</p> 
  
                            <p class="subtitle">Navigation part</p> 
  
                        </article> 
                        <article class="tile is-child  
                                        notification is-warning"> 
                            <p class="title">Body</p> 
  
                            <p class="subtitle">Content of the page</p> 
  
                        </article> 
                    </div> 
                    <div class="tile is-parent"> 
                        <article class="tile is-child  
                                        notification is-info"> 
                            <p class="title">Content </p> 
  
                            <p class="subtitle">With an image</p> 
  
                            <div class="image is-4by3"> 
                                <img
                                    src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png"> 
                            </div> 
                        </article> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>