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 =
</ 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
<!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:
Reference: https://bulma.io/documentation/layout/tiles/#4-columns