Bulma Tag Addons

Last Updated : 09 Feb, 2022

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.

Bulma tags are a very useful element. We can attach information to a block or other component. It is smaller than buttons which makes it more helpful to display it in numbers and make a long list of items. In this article, we will learn about tag add-ons and their uses.

Bulma Tag Addons Classes:

has-addons: When we need to attach tags together we use the has-addons modifier in the tag class.

Syntax:

<div class="tags has-addons">
   .......
</div>

Example 1: Below example illustrates the Bulma Tag Addons. We can attach tags together using the has-addons modifier.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Tag Addons</title> 
    <link rel='stylesheet' href= 
    'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body class="has-text-centered"> 
    <h2 class="is-size-2 has-text-success"> 
        GeeksforGeeks 
    </h2> 
    <b>Bulma Tag Addons</b><br><br> 
    <div class="tags has-addons is-centered"> 
        <span class="tag is-success">GeeksforGeeks</span> 
        <span class="tag">Courses</span> 
    </div> 
</body> 
  
</html>

Output:

Bulma Tag Addons

Example 2: We can also attach the delete tag with the text tag using the is-delete class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Tag Addons</title> 
    <link rel='stylesheet' href= 
  'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body class="has-text-centered"> 
    <h2 class="is-size-2 has-text-success"> 
        GeeksforGeeks 
    </h2> 
    <b>Bulma Tag Addons</b><br><br> 
    <div class="tags has-addons is-centered"> 
        <span class="tag is-success is-grouped">Courses</span> 
        <a class="tag is-delete"></a>         
    </div> 
</body> 
  
</html>