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.
Tile in Bulma framework is a single element class with the help of which we can create two-dimensional layouts or metro-like grids, etc.
There will be instances when we have to manipulate our tiles in a certain way in order to achieve the desired result. This can be done by using the Tile Modifiers. Let us learn tile modifiers and understand how they can be used and what manipulations they can perform on our tiles.
The tile element has a total of 16 modifiers. There are 3 contextual modifiers, 1 directional modifier, and 12 size modifiers from is-1 to is-12 classes. The classes are listed below in the respective mentioned order.
Bulma Tiles modifier classes:
- is-ancestor: It is the beginning of the tile. This modifier wraps other tiles.
- is-parent: It is a modifier, that comes below the is-ancestor modifier.
- is-child: It is a modifier, that comes below the is-parent modifier.
- is-vertical: This class makes the tile vertical.
- is-1: It is a size modifier class that starts from is-1 to is-12 class.
Syntax:
<div class="tile is-ancestor">
<div class="tile is-vertical is-2">
...
</div>
...
</div>
Example 1: let us have a look at a program that includes all the three types of modifiers that have been discussed above.
<!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>
<style>
body {
margin-left: 20px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="content" style="text-align:center;">
<h1 class="has-text-success">GeeksforGeeks</h1>
<strong>Tile Modifiers</strong>
</div>
<div class="container">
<div class="tile is-ancestor">
<div class="tile is-vertical is-3">
<div class="tile is-child notification
has-text-success has-background-dark">
<p class="title">This tile is Vertical</p>
<div class="content">
We are vertical!
</div>
<br>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child notification
has-text-success has-background-dark">
<p class="title">Middle Tile</p>
<div class="content">
We are middle!
</div>
<br>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child notification
has-text-success has-background-dark">
<p class="title">Wide tile</p>
<div class="content">
We are wide!
</div>
<br>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: The following code also demonstrates the above tile modifier classes.
<!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>
<style>
body {
margin-left: 20px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="content" style="text-align:center;">
<h2 class="has-text-success">GeeksforGeeks</h2>
<strong>Tile Modifiers</strong>
</div>
<div class="container">
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child box notification
has-background-dark has-text-success">
<p class="title">Tile 1</p>
<p>
CSS (Cascading Style Sheets) is a
stylesheet language used to design
the webpage to make it attractive.
</p>
</div>
<div class="tile is-child box notification
has-background-dark has-text-success">
<p class="title">Tile 2</p>
<p>
The reason for using this is to simplify the
process of making web pages presentable.
</p>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box notification
has-background-dark has-text-success">
<p class="title">Tile 3</p>
<p>
More importantly, it enables you to do
this independent of the HTML that
makes up each web page.
</p>
<p>
It is the basic structure of HTML webpage
and we use CSS style inside webpage. In
a web page, we use internal CSS (i.e.
adding CSS code inside head tag of HTML
code).
</p>
<p>
It is the combination of Hypertext and
Markup language. Hypertext defines the
link between the web pages
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
