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Â
<!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=
"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 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=
"https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png">
</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Â
<!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=
"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 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=
"https://media.geeksforgeeks.org/wp-content/uploads/20210224040124/JSBinCollaborativeJavaScriptDebugging6-300x160.png">
</figure>
<p>
Learn about web development
and other web frameworks
</p>
</div>
</div>
</article>
</div>
</div>
</div>
</body>
</html>
Output:
