Bulma Tiles– Bulma Css provides classes to create two-dimensional elements called tiles. You can create beautiful tiles layout using these classes. Here in this article we are going to explain the tiles with different-different examples.
Bulma Tiles Example
Let us create very basic tile. Create an element with class title and then add child elements. Here is an example-
Bulma Tiles | Example:
<div class="tile is-ancestor"> <div class="tile is-4 is-vertical is-parent"> <div class="tile is-child box notification is-primary"> <p class="title">First Tile</p> </div> <div class="tile is-child box notification is-info"> <p class="title">Second Tile</p> </div> </div> <div class="tile is-parent"> <div class="tile is-child box notification is-warning"> <p class="title">Third Tile</p> </div> </div> </div> |
If yo run the above example it will produce the output something like this.
Modifiers
Tiles has following modifiers-
- 3 Contextual
is-ancestor
is-parent
is-child - 1 Directional
is-vertical - 12 horizontal Size
is-1 to is-12– You can use any size like – is-1, is-2, is-3, is-4…..is-12.
Nested Tiles
You can create nested tiles using the class- tiles.
| Example:
<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 box notification is-primary"> Title 1 </article> <article class="tile is-child box notification is-info"> Title 2 </article> </div> <div class="tile is-parent"> <article class="tile is-child box notification is-warning"> Title 3 </article> </div> </div> <div class="tile is-parent"> <article class="tile is-child box notification is-link"> Title 4 </article> </div> </div> <div class="tile is-parent"> <article class="tile is-child box notification is-primary"> Title 5 </article> </div> </div> |
If You run the above example it will look something like this –