Open In App

Bulma Tiles

Improve
Improve
Like Article
Like
Save
Share
Report

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=
</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=
                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:

Bulma Tiles

Bulma Tiles

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"
    />
  </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=
              </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:

Bulma Tiles

Bulma Tiles

Reference: https://bulma.io/documentation/layout/tiles/



Last Updated : 18 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads