Open In App

Bulma 4 columns Tiles

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we’ll see Bulma 4 Columns Tiles. For creating a grid-like structure in your web application, the Bulma framework provides tile elements. These elements are used in building a 2D design pattern like Pinterest, etc. In Bulma, we can also create 4 columns tiles that can be used where there is a need for building a grid system of 4 columns. 

Bulma 4 Columns Tiles Class: There is no defined class to create 4 columns in Bulma, we need to simply put 4 div inside of ancestor class.

Syntax: Below is the syntax showing the 4 column tiles.

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

Example 1: Below example illustrate Bulma 4 column Tiles 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bulma 4 columns Tiles</title>
    <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=
</head>
<body>
    <div class="content container has-text-centered">
      <h1 class="title has-text-success">GeekforGeeks</h1>
      <h1 class="subtitle">Bulma 4 Column Tiles</h1>
 
      <!-- Tiles starts here -->
      <div class="tile is-ancestor">
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-warning">
            <p class="title">Tile One</p>
 
 
 
            <p class="subtitle">Subtitle</p>
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-info">
            <p class="title">Tile Two</p>
 
 
 
            <p class="subtitle">Subtitle</p>
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-danger">
            <p class="title">Tile Three</p>
 
 
 
            <p class="subtitle">Subtitle</p>
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-primary">
            <p class="title">Tile Four</p>
 
 
 
            <p class="subtitle">Subtitle</p>
 
 
 
          </article>
        </div>
      </div>
 
      <div class="tile is-ancestor">
        <div class="tile is-vertical is-9">
          <div class="tile">
            <div class="tile is-parent">
              <article class="tile is-child
                              box has-background-success">
                <p class="title">Tile Five</p>
 
 
 
                <p class="subtitle">Subtitle</p>
 
 
 
                <div class="content">
                </div>
              </article>
            </div>
            <div class="tile is-8 is-vertical">
              <div class="tile">
                <div class="tile is-parent">
                  <article class="tile is-child box
                                  has-background-dark">
                    <p class="title has-text-white">
                      Tile Six</p>
 
 
 
                    <p class="subtitle has-text-white">
                      Subtitle</p>
 
 
 
                  </article>
                </div>
                <div class="tile is-parent">
                  <article class="tile is-child box
                                  has-background-warning">
                    <p class="title">
                      Tile Seven</p>
 
 
 
                    <p class="subtitle">
                      Subtitle</p>
 
 
 
                  </article>
                </div>
              </div>
              <div class="tile is-parent">
                <article class="tile is-child box
                                has-background-danger">
                  <p class="title">
                    Tile Eight</p>
 
 
 
                  <p class="subtitle">
                    Subtitle</p>
 
 
 
                </article>
              </div>
            </div>
          </div>
          <div class="tile">
            <div class="tile is-8 is-parent">
              <article class="tile is-child box
                              has-background-info">
                <p class="title">
                  Tile Nine</p>
 
 
 
                <p class="subtitle">
                  Subtitle</p>
 
 
 
                <div class="content">
                </div>
              </article>
            </div>
            <div class="tile is-parent">
              <article class="tile is-child box
                              has-background-success">
                <p class="title">Tile Ten</p>
 
 
 
                <p class="subtitle">Subtitle</p>
 
 
 
                <div class="content">
                </div>
              </article>
            </div>
          </div>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box">
            <div class="content">
              <p class="title has-text-success">
                GeeksforGeeks
              </p>
 
 
 
              <p class="subtitle">Tile Eleven</p>
 
 
 
              <div class="content">
                <figure class="image is-4by4">
                    <img src=
                  </figure>
                   
 
<p>
                    Learn about web development
                    and other web frameworks
                  </p>
 
 
 
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
</body>
</html>


Output:

Example 2: Another example illustrating Bulma 4 column Tiles 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bulma 4 columns Tiles</title>
    <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=
</head>
<body>
    <div class="content container has-text-centered">
      <h1 class="title has-text-success">GeekforGeeks</h1>
      <h1 class="subtitle">Bulma 4 Column Tiles</h1>
 
      <!-- Tiles starts here -->
      <div class="tile is-ancestor">
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-light">
            <p class="title">PRACTICE</p>
 
 
 
            <p class="subtitle">
              Practice your coding knowledge
            </p>
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-success">
            <p class="title">CODING COMPETITIONS</p>
 
 
 
            <p class="subtitle">
              Participate in programming competitions
            </p>
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-warning">
            <p class="title">JOBS</p>
 
 
 
            <p class="subtitle">
              Find and apply for your favourite jobs
            </p>
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-info">
            <p class="title">GBLOGS</p>
 
 
 
            <p class="subtitle">
              All tech related blogs</p>
 
 
 
          </article>
        </div>
      </div>
 
      <div class="tile is-ancestor">
        <div class="tile is-vertical is-8">
          <div class="tile">
            <div class="tile is-parent">
              <article class="tile is-child box
                              has-background-dark">
                <p class="title has-text-white">TUTORIALS</p>
 
 
 
                <p class="subtitle has-text-white">
                  Java, C++, Python, etc</p>
 
 
 
                <div class="content">
                </div>
              </article>
            </div>
            <div class="tile is-8 is-vertical">
              <div class="tile">
                <div class="tile is-parent">
                  <article class="tile is-child
                                  box has-background-danger">
                    <p class="title">CS SUBJECTS</p>
 
 
 
                    <p class="subtitle">
                      OS, DBMS, CN, SQL
                    </p>
 
 
 
                  </article>
                </div>
                <div class="tile is-parent">
                  <article class="tile is-child
                                  box has-background-primary">
                    <p class="title">WEB TECHNOLOGIES</p>
 
 
 
                    <p class="subtitle">
                      HTML, CSS, JS, React, BootStrap
                    </p>
 
 
 
                  </article>
                </div>
              </div>
              <div class="tile is-parent">
                <article class="tile is-child
                                box has-background-warning">
                  <p class="title">DSA</p>
 
 
 
                  <p class="subtitle">
                    Learn about Data Structures and Algorithms
                  </p>
 
 
 
                </article>
              </div>
            </div>
          </div>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box">
            <div class="content">
              <p class="title has-text-success">GeeksforGeeks</p>
 
 
 
              <p class="subtitle">Tile Eleven</p>
 
 
 
              <div class="content">
                <figure class="image is-4by4">
                    <img src=
                  </figure>
                   
 
<p>
                    Learn about web development
                    and other web frameworks
                  </p>
 
 
 
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
</body>
</html>


Output:

Bulma 4 columns Tiles

Bulma 4 columns Tiles

Reference: https://bulma.io/documentation/layout/tiles/#4-columns



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