Skip to content
Related Articles

Related Articles

Bulma Tags Combinations

Improve Article
Save Article
  • Last Updated : 02 Feb, 2022
Improve Article
Save Article

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=
    <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>


Output:

Bulma Tags Combinations

Bulma Tags Combinations

Reference: https://bulma.io/documentation/elements/tag/#combinations


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!