Open In App

Bulma 3 Columns Tiles

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we’ll see Bulma 3 Columns Tiles. Bulma framework uses tile elements for building tiles in web applications. In Bulma, tile elements are used to build a 2D design pattern as you may have seen in various websites such as Pinterest, etc. In Bulma, we can create 3 columns tiles and can create a grid structure of three columns. 

Bulma 3 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 of 3 column tiles.

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

Example 1: Below example illustrates the Bulma 3 Columns 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=
</head>
<body>
    <div class="content container has-text-centered">
      <h1 class="title has-text-success">GeekforGeeks</h1>
      <h1 class="subtitle">Bulma 3 Column Tiles</h1>
      <!-- Tiles starts here -->
      <div class="tile is-ancestor">
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-success">
            <p class="title">Column One</p>
 
 
 
 
            <p class="subtitle">Hola! Hi...</p>
 
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-warning">
            <p class="title">Column Two</p>
 
 
 
 
            <p class="subtitle">What's up?</p>
 
 
 
 
          </article>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child
                          box has-background-dark">
            <p class="title has-text-white">Column Three</p>
 
 
 
 
            <p class="subtitle has-text-white">How are you??</p>
 
 
 
 
            <div class="content">
              <p class="has-text-white">
                Please tell me something about you and let's get
                to know each other.
              </p>
 
 
 
 
            </div>
          </article>
        </div>
      </div>
 
      <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
                              box has-background-info">
                <p class="title">Vertical Tiles</p>
 
 
 
 
                <p class="subtitle">Connect</p>
 
 
 
 
              </article>
            </div>
            <div class="tile is-parent">
              <article class="tile is-child
                              box has-background-white">
                <p class="title">GeekforGeeks</p>
 
 
 
 
                <p class="subtitle">Welcome Geek!</p>
 
 
 
 
                <figure class="image is-3by2">
                  <img src=
                </figure>
              </article>
            </div>
          </div>
          <div class="tile is-parent">
            <article class="tile is-child box
                            has-background-primary">
              <p class="title">Widest Column</p>
 
 
 
 
              <p class="subtitle">Need help?</p>
 
 
 
 
            </article>
          </div>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box has-background-warning">
            <div class="content">
              <p class="title">Tallest Column</p>
 
 
 
 
              <p class="subtitle">Want to know something?</p>
 
 
 
 
              <div class="content">
                 
 
 
<p>
                  You can learn anything you want.
                  You can learn how to code, about
                  coding competitions and so on.
                  You can learn how to solve problems,
                  about problems and so on. You can learn
                  how to be a good programmer, about programming
                  and so on. You can learn how to be a good programmer,
                  about programming and so on, etc.
                </p>
 
 
 
 
                 
 
 
<p>
                  GFG also provides various courses on various topics.
                  Various internships are also available for students
                  like technical content writing, android development,
                  etc.
                </p>
 
 
 
 
                 
 
 
<p>
                  GeekforGeeks is the best place to learn about coding,
                  competitive programming, problems, etc.
                </p>
 
 
 
 
              </div>
            </div>
          </article>
        </div>
      </div>
      <div class="tile is-ancestor">
        <div class="tile is-parent">
          <article class="tile is-child box has-background-info">
            <p class="title">Side Left Column</p>
 
 
 
 
            <p class="subtitle">You made it here.</p>
 
 
 
 
            <div class="content">
               
 
 
<p>
                GFG has designed various programming courses including
                questions in order of difficulty and various other
                features.
              </p>
 
 
 
 
            </div>
          </article>
        </div>
        <div class="tile is-parent is-8">
          <article class="tile is-child box has-background-danger">
            <p class="title">Main Column</p>
 
 
 
 
            <p class="subtitle">Hope you find it helpful.</p>
 
 
 
 
            <div class="content">
               
 
 
<p>
                CP means solving well-defined problems by
                writing programs below the specified limits.
                On GFG practice platform, you need to write
                code under many restrictions, like code execution
                time and memory limits for your program.
              </p>
 
 
 
 
            </div>
          </article>
        </div>
      </div>
    </div>
</body>
</html>


 
 

Output:

 

Bulma 3 columns Tiles

Bulma 3 columns Tiles

Example 2: Another example for Bulma 3 Columns 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=
</head>
<body>
  <div class="content container has-text-centered">
    <h1 class="title has-text-success">GeekforGeeks</h1>
    <h1 class="subtitle">Bulma 3 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">Coding </p>
 
 
 
 
          <p class="subtitle">Learn to code</p>
 
 
 
 
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child box
                        has-background-success">
          <p class="title">Practice</p>
 
 
 
 
          <p class="subtitle">
            Level up your skills in coding
          </p>
 
 
 
 
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child box
                        has-background-danger">
          <p class="title has-text-white">Web Tech</p>
 
 
 
 
          <p class="subtitle has-text-white">
            HTML, CSS, JS
          </p>
 
 
 
 
          <div class="content">
            <p class="has-text-white">
              Learn about web development
              and other web frameworks
            </p>
 
 
 
 
          </div>
        </article>
      </div>
    </div>
    <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 box
                            has-background-dark">
              <p class="title has-text-white">Tutorials</p>
 
 
 
 
              <p class="subtitle has-text-white">
                Learn from Tutorials at GFG
              </p>
 
 
 
 
            </article>
          </div>
          <div class="tile is-parent">
            <article class="tile is-child box
                            has-background-white">
              <p class="title">GeekforGeeks</p>
 
 
 
 
              <p class="subtitle">Welcome Geek!</p>
 
 
 
 
              <figure class="image is-4by4">
                <img src=
              </figure>
            </article>
          </div>
        </div>
        <div class="tile is-parent">
          <article class="tile is-child box
                          has-background-info ">
            <p class="title has-text-white">
              Participate in Coding Competitions
            </p>
 
 
 
 
            <p class="subtitle has-text-white">
              C++, Java, DSA , etc
            </p>
 
 
 
 
          </article>
        </div>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child box
                        has-background-primary">
          <div class="content">
            <p class="title has-text-white">
              Apply for Jobs</p>
 
 
 
 
            <p class="subtitle has-text-white">
              Get Hired in your dream company
            </p>
 
 
 
 
            <div class="content">
              <p class="has-text-white">
                Learn at GFG
              </p>
 
 
 
 
              <p class="has-text-white">
                Apply for jobs at various companies
              </p>
 
 
 
 
              <p class="has-text-white">
                Get Hired
              </p>
 
 
 
 
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</body>
</html>


 
 

Output:

 

Bulma 3 columns Tiles

Bulma 3 columns Tiles

 

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

 



Last Updated : 24 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads