- Bulma Tutorial
- Bulma - Home
- Bulma - Introduction
- Bulma - Overview
- Bulma - Modifiers
- Bulma - Columns
- Bulma - Layout
- Bulma - Form
- Bulma - Elements
- Bulma - Components
- Bulma Useful Resources
- Bulma - Quick Guide
- Bulma - Resources
- Bulma - Discussion
Bulma - Tag and Title
Description
Bulma provides small labels called tags to display the additional information. You need to add tag class, to insert a tag label in the page.
The below example describes how to display a tag label, different types of colors by using color modifiers such as is-black, is-dark, is-light, is-white, is-primary, is-link, is-info, is-success, is-warning, is-danger) and sizes (using classes such as is-medium and is-large) of tag labels for the elements in the page −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements 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">
Tags
</span>
<br>
<br>
<span class = "is-size-5">
Basic Tag
</span>
<br>
<span class = "tag">
Simple Tag
</span>
<br>
<br>
<span class = "is-size-5">
Tag Colors
</span>
<br>
<span class = "tag is-black">Black</span>
<span class = "tag is-dark">Dark</span>
<span class = "tag is-light">Light</span>
<span class = "tag is-white">White</span>
<br>
<br>
<span class = "tag is-primary">Primary</span>
<span class = "tag is-link">Link</span>
<span class = "tag is-info">Info</span>
<span class = "tag is-success">Success</span>
<span class = "tag is-warning">Warning</span>
<span class = "tag is-danger">Danger</span>
<br>
<br>
<span class = "is-size-5">Tag Sizes</span><br>
<span class = "tag is-primary is-medium">Medium</span>
<span class = "tag is-info is-large">Large</span>
<br>
<br>
</div>
</section>
</body>
</html>
Execute the above code and you will get the below output −
List of Tags and Color Combinations
Bulma allows creating list of tags with tags class in the container and also display the tags in different types of colors.
Let's create a simple example to display list of tags (using tags class) and color combinations (using above color modifiers) in the page −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements 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">
Tags
</span>
<br>
<br>
<span class = "is-size-5">
List of tags
</span>
<br>
<br>
<div class = "tags">
<span class = "tag">India</span>
<span class = "tag">Srilanka</span>
<span class = "tag">England</span>
<span class = "tag">Australia</span>
<span class = "tag">Spain</span>
<span class = "tag">Russia</span>
<span class = "tag">South Africa</span>
<span class = "tag">Ireland</span>
<span class = "tag">Zimbabwe</span>
</div>
<span class = "is-size-5">
Tags with Delete and Color Combinations
</span>
<br>
<br>
<div class = "tags has-addons">
<span class = "tag is-success">India</span>
<a class = "tag is-delete"></a>
</div>
<div class = "tags has-addons">
<span class = "tag is-warning">Srilanka</span>
<a class = "tag is-delete"></a>
</div>
<div class = "tags has-addons">
<span class = "tag is-danger">Srilanka</span>
<a class = "tag is-delete"></a>
</div>
</div>
</section>
</body>
</html>
The above code will display the below output −
Title and Subtitle
You can display title and subtitle by using the .title and .subtitle classes in the elements. Also, there are 6 types of sizes from is-1 to is-6 for displaying title and subtitle in the page.
The below example demonstrate how to make use of .title and .subtitle classes along with sizes in the page −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements 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 = "is-size-3">Title and Subtitle</span>
<br>
<h1 class = "title">Tutorialspoint (title)</h1>
<h2 class = "subtitle">easy way for learning online (subtitle)</h2>
<span class = "is-size-3">Sizes of Title and Subtitle</span>
<br>
<h1 class = "title is-1">Tutorialspoint (is-1)</h1>
<h1 class = "subtitle is-1">easy way for learning online</h1>
<br>
<h2 class = "title is-2">Tutorialspoint (is-2)</h2>
<h2 class = "subtitle is-2">easy way for learning online</h2>
<br>
<h3 class = "title is-3">Tutorialspoint (is-3)</h3>
<h3 class = "subtitle is-3">easy way for learning online</h3>
<br>
<h4 class = "title is-4">Tutorialspoint (is-4)</h4>
<h4 class = "subtitle is-4">easy way for learning online</h4>
<br>
<h5 class = "title is-5">Tutorialspoint (is-5)</h5>
<h5 class = "subtitle is-5">easy way for learning online</h5>
<br>
<h6 class = "title is-6">Tutorialspoint (is-6)</h6>
<h6 class = "subtitle is-6">easy way for learning online</h6>
</div>
</section>
</body>
</html>
Execute the above code and you will get the below output −