In this guide, we will discuss Bulma Tiles.
Description
Bulma creates 2-dimensional layout or Metro Menu style by using a single element class called tile. The metro menu style is a new style interface for Microsoft applications, like Windows 8.
Let’s create a simple example by using tile class −
Note − Resize the coding-ground output window to see the changes occurring according to window size.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Tiles Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Tiles
</span>
<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 notification is-primary">
<p class = "title">Vertical Tile</p>
<div class = "content">Hello World!!!</div>
<br>
</article>
</div>
<div class = "tile is-parent">
<article class = "tile is-child notification is-info">
<p class = "title">Middle Tile</p>
<p class = "subtitle">With an image</p>
<figure class = "image is-2by1">
<img src = "https://adglob.in/bootstrap/images/64.jpg">
</figure>
</article>
</div>
</div>
<div class = "tile is-parent">
<article class = "tile is-child notification is-danger">
<p class = "title">Wide tile</p>
<div class = "content">
Hello World!!!
</div>
<br>
</article>
</div>
</div>
<div class = "tile is-parent">
<article class = "tile is-child notification is-success">
<div class = "content">
<p class = "title">Tall tile</p>
<div class = "content">
Hello World!!!
</div>
<br>
</div>
</article>
</div>
</div>
</div>
</section>
</body>
</html>
Nesting
Bulma allows nesting the tile elements to display the tiles in a grid format. Nesting of tiles uses 3 levels of hierarchy −
- is-ancestor − It is a beginning of the tile, which wraps other tiles.
- is-parent − It is a modifier, that comes under is-ancestor modifier.
- is-child − It is a modifier, that comes under is-parent modifier.
The below simple example describes nesting of the tile elements by using above 3 levels of tiles −
Note − Resize the coding-ground output window to see the changes occurring according to window size.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Tiles Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Nesting of Tiles
</span>
<br>
<br>
<div class = "tile is-ancestor">
<div class = "tile is-4 is-vertical is-parent">
<div class = "tile is-child box">
<p class = "title">First Box</p>
<p>This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.</p>
</div>
<div class = "tile is-child box">
<p class = "title">Second Box</p>
<p>This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.</p>
</div>
</div>
<div class = "tile is-parent">
<div class = "tile is-child box">
<p class = "title">Third Box</p>
<p>This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.</p>
<p>This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.</p>
<p>This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Execute the above code.
Next Topic : Click Here
Pingback: Bulma - Hero banner | Adglob Infosystem Pvt Ltd