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.
<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.
Example 2: Another example illustrating Bulma Tiles.