Bulma is a free and open-source CSS framework. It can be used as an alternative to Bootstrap. Bulma ships with pre-styled components so it makes the development of interfaces faster as we don’t have to style everything from the ground up.
Tag is a small element that ships with Bulma. The tag can be used to attach information to various places on the website. In this article, we will be seeing the modifiers we can use with the tag element.
Bulma Tag Modifier Classes:
- is-rounded: This class is used to make the border of the tag rounded.
- is-delete: This class is used to change the tag into a delete button.
Syntax:
<span class="tag Tag-Modifier-Classes"></span>
Note: Make sure the tag element has no HTML inside it if the is-delete modifier is used.
Example: The below example shows how to use is-rounded and is-delete tag modifiers.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bulma Tags Modifiers</title>
<link rel='stylesheet' href=
<style>
.container.is-fluid>span {
margin-top: 10px;
}
.container.is-fluid>p {
margin-top: 20px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">
Bulma Tags Modifiers
</b>
<div class="container is-fluid">
<strong>Tag element with
<i>is-rounded</i> modifier:
<strong>
<br>
<span class="tag is-primary is-rounded">
Algorithms
</span>
<br>
<strong>Tag element with
<i>is-delete</i> modifier:
</strong>
<br>
<span class="tag is-delete is-medium"></span>
</div>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/elements/tag/#modifiers