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.
<!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:
Example 2: Another example illustrating Bulma Tiles.
<!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:
Reference: https://bulma.io/documentation/layout/tiles/