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