Bulma Tiles - GeeksforGeeks

Bulma is a free and open-source CSS framework used in building web applications. In this article, we'll see Bulma Tiles. Bulma framework provides tile elements to create a layout in the form of grid tiles. For creating a tile layout first, we use an ancestor tile that wraps all other tiles. Then if you need the tiles to be structured vertically, we use the is-vertical (horizontal by default) class. To add the content, just use is-parent and is-child classes. The tile elements can be used to create a 2-dimensional design pattern like Pinterest, etc.

Bulma Tiles Class:

tile: This is the only class that is used to create a 2-D layout to build a tile-like structure.

Syntax:

<div class="tile">
    <div class="tile is-ancestor">
        ....
    </div>
    <div class="tile is-parent">
        <div class="tile is-child">
            ....
        </div>    
    </div>
</div>

Example 1: Below example illustrates the Bulma Tiles.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" 
        content="IE=edge" />
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" 
        href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
</head>

<body>
  <div class="content container has-text-centered">
    <h1 class="title has-text-success">GeekforGeeks</h1>
    <h1 class="subtitle">Bulma Tiles</h1>

    <!-- Tiles starts here -->
    <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-warning">
              <p class="title">Vertical Tile</p>
              <p class="subtitle">Topmost tile</p>
            </article>
            <article class="tile is-child notification is-dark">
              <p class="title">Second Tile</p>
              <p class="subtitle">Bottom tile</p>
            </article>
          </div>
          <div class="tile is-parent">
            <article class="tile is-child notification is-danger">
              <p class="title">Middle Tile</p>
              <p class="subtitle">Middle second tile</p>
            </article>
          </div>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child notification is-light">
            <p class="title">Wide tile</p>
            <p class="subtitle">Image inside Tile</p>
            <div class="content">
              <img
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png"
                alt="" />
            </div>
          </article>
        </div>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child notification is-info">
          <div class="content">
            <p class="title">Tallest tile</p>

            <p class="subtitle">
              Larger one as compared to other tiles
            </p>

            <div class="content"></div>
          </div>
        </article>
      </div>
    </div>
  </div>
</body>

</html>

Output:

Example 2: Another example illustrating Bulma Tiles.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
  </head>
  <body>
    <div class="content container has-text-centered">
      <h1 class="title has-text-success">GeekforGeeks</h1>
      <h1 class="subtitle">Bulma Tiles</h1>
      
      <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-info">
                <p class="title">Welcome to</p>

              </article>
              <article class="tile is-child notification is-danger">
                <p class="title">Learn, Tutorials, Contest</p>

                <p class="subtitle">Only for Geeks!</p>

              </article>
            </div>
            <div class="tile is-parent">
              <article class="tile is-child notification is-white">
                <p class="title">GeeksforGeeks</p>

                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png" />
              </article>
            </div>
          </div>
          <div class="tile is-parent">
            <article class="tile is-child notification is-light">
              <p class="title">Technical Articles and GBlog</p>

              <p class="subtitle">Read about Latest Technologies....</p>

              <div class="content">
              </div>
            </article>
          </div>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child notification is-success">
            <div class="content">
              <p class="title">Explore</p>

              <div class="container has-text-justify">
                <p class="subtitle">Find Jobs</p>

                <p class="subtitle">Learn from Tutorials</p>

                <p class="subtitle">Practice coding</p>

                <p class="subtitle">Courses</p>

                <p class="subtitle">Learn Programming</p>

                <p class="subtitle">Participate in Coding contest</p>

              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
  </body>
</html>

Output: