Bulma Tags List

Last Updated : 09 Feb, 2022

Bulma is a CSS framework based on flexbox. It comes with pre-styled components which helps us to develop beautiful and responsive websites easily. In this article, we will be seeing how to make a list of tags in Bulma.

A list of tags can be made by wrapping all the tag elements in a container with tags class. If the tag list cannot fit the width of the screen it will automatically wrap on the next lines, keeping the space between tags consistent.

Bulma Tags List Classes:

tags: This class is used on the container which contains the tags, to make a list of those tags.
tag: This class is used inside the tags for anyone tag element among the list.

Syntax:

<div class="tags">
   <div class="tag">...</div>
   <div class="tag">...</div>
    ...
</div>

Example: The below example shows the use of the tags container to make a list of tags.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Tags List</title> 
    <link rel='stylesheet' 
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
  
    <style> 
        .container{ 
            margin-top: 25px; 
        } 
    </style> 
</head> 
  
<body class="has-text-centered"> 
    <h1 class="is-size-2 has-text-success"> 
      GeeksforGeeks 
    </h1> 
    <b class="is-size-4">Bulma Tags List</b> 
    <div class="container is-fluid"> 
        <div class="tags is-centered"> 
            <span class="tag is-primary"> 
              Algorithms 
            </span> 
            <span class="tag is-primary"> 
              Data Structures 
            </span> 
            <span class="tag is-primary"> 
              Interview Preparation 
            </span> 
            <span class="tag is-primary"> 
              C++ 
            </span> 
            <span class="tag is-primary"> 
              Java 
            </span> 
            <span class="tag is-primary"> 
              JavaScript 
            </span> 
            <span class="tag is-primary"> 
              Python 
            </span> 
            <span class="tag is-primary"> 
              Competitive Programming 
            </span> 
            <span class="tag is-primary"> 
              Machine Learning 
            </span> 
        </div> 
    </div> 
</body> 
  
</html>