Bulma Tags Combinations

Last Updated : 02 Feb, 2022

Bulma is an open-source CSS framework that ships with pre-styled elements and components which makes it easier to develop responsive and beautiful web interfaces. In this article, we will be seeing how the tag element in Bulma can be combined with other elements. Bulma itself combines the tag element with the delete element.

Bulma Tags Combinations Classes: There is no class here we will combine tags with color so if you have to knowledge of Color and tags you can create any Tags Combination.

Syntax:

<span class="tag is-success is-large">
  Mission Successful
  <button class="delete is-large"></button>
</span>

Example: The example below shows how to combine the tag element with the delete element.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bulma Input Colors</title> 
    <link rel='stylesheet' 
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
    <style> 
        .container.is-fluid>span{ 
            margin-top: 20px; 
        } 
    </style> 
</head> 
<body class="has-text-centered"> 
    <h1 class="is-size-2 has-text-success"> 
      GeeksforGeeks 
    </h1> 
    <b>Bulma Tags Combinations</b> 
    <div class="container is-fluid"> 
        <span class="tag is-success is-large"> 
            Algorithms 
            <button class="delete is-large"></button> 
        </span> 
        <br> 
        <span class="tag is-danger is-medium"> 
            Data Structures 
            <button class="delete is-medium"></button> 
        </span> 
        <br> 
        <span class="tag is-info is-small"> 
            Java 
            <button class="delete is-small"></button> 
        </span> 
    </div> 
</body> 
</html>