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 using Bulma.
Nesting: Nesting means one element is enclosed inside another element. It is used to create an interactive user interface.
Used Classes:
- is-parent: This class is used to create a parent element outside class.
- is-child: This class is used to create a child class element inside the class.
- is-ancestor: This class is used to create the main ancestor tile.
- is-vertical: This class is used to create the vertical tile.
Syntax:
<div class="is-ancestor">
...
</div>Example 1: In the below example, we will make use of the HTML <div> element inside the other <div> element.
HTML
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<style>
body
{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<h1 style="color:green;font-size:36px">
GeeksforGeeks
</h1>
<strong>Bulma Nesting requirements</strong></br>
<div style="height:10px;"></div>
<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">
This is child 1 of is-vertical class
</article>
<article class="tile is-child box">
This is child 2 of is-vertical class
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
This is child
</article>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In the below code, we will be creating nested tiles one in another tile using the is-ancestor,is-parent, and is-child classes of Bulma.
HTML
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<style>
body
{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<h1 style="color:green;font-size:36px">
GeeksforGeeks
</h1>
<strong>Bulma Nesting requirements</strong>
<br></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 box is-dark">
Level 1 nesting
<article class="tile is-child box is-dark">
Level 2 nesting
<article class="tile is-child box is-dark">
Level 3 nesting
</article>
</article>
</article>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/layout/tiles/#nesting-requirements