Bulma Nesting Tiles
Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.
In this article, we will learn about Nesting tiles with the help of Bulma CSS.
Nesting Tiles: Tiles are used to divide the webpage into several parts of different sizes.
Class Used:
- title: This class is used to divide the webpage into different sizes.
Syntax:
<element-name class="title">...</element-name>
Example 1: In the below code, we will make use of the title class.
HTML
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <style> .tile { background-color: lightgreen; border: 2px solid green; } body { margin: 15px; } </style></head> <body> <center> <h1 style="color:green;font-size:36px"> GeeksforGeeks</h1><br> <div class="tile">GFG</div> </center></body> </html> |
Output:
Example 2: In the below code we will make use of the title class to segregate the webpage into several parts.
HTML
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <style> .columns { background-color: lightgreen; border: 2px solid green; } body { margin-left: 15px; } </style></head> <body> <center> <h1 style="color:green;font-size:36px"> GeeksforGeeks</h1><br> <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-primary"> <p class="title">Header Tile</p> <p class="subtitle">Navigation part</p> </article> <article class="tile is-child notification is-warning"> <p class="title">Body</p> <p class="subtitle">Content of the page</p> </article> </div> <div class="tile is-parent"> <article class="tile is-child notification is-info"> <p class="title">Content </p> <p class="subtitle">With an image</p> <div class="image is-4by3"> <img src= </div> </article> </div> </div> </div> </div> </center></body> </html> |
Output:
Reference: https://bulma.io/documentation/layout/tiles/#modifiers
Please Login to comment...