Bulma - Tag and Title | Adglob Infosystem Pvt Ltd

In this guide, we will discuss Tag and Title in Bulma.

Description

Bulma provides small labels called tags to display the additional information. You need to add tag class, to insert a tag label on 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>

List of Tags and Color Combinations

Bulma allows creating a list of tags with tags class in the container and also displays the tags in different types of colors.

Let’s create a simple example to display a list of tags (using tags class) and color combinations (using the above color modifiers) on 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>

Title and Subtitle

You can display the 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 subtitles on the page.

The below example demonstrates how to make use of .title and .subtitle classes along with sizes on 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">adglob (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">Adglob (is-1)</h1>
            <h1 class = "subtitle is-1">easy way for learning online</h1>
            <br>
            
            <h2 class = "title is-2">Adglob (is-2)</h2>
            <h2 class = "subtitle is-2">easy way for learning online</h2>
            <br>
            
            <h3 class = "title is-3">Adglob (is-3)</h3>
            <h3 class = "subtitle is-3">easy way for learning online</h3>
            <br>
            
            <h4 class = "title is-4">Adglob (is-4)</h4>
            <h4 class = "subtitle is-4">easy way for learning online</h4>
            <br>
            
            <h5 class = "title is-5">Adglob (is-5)</h5>
            <h5 class = "subtitle is-5">easy way for learning online</h5>
            <br>
            
            <h6 class = "title is-6">Adglob (is-6)</h6>
            <h6 class = "subtitle is-6">easy way for learning online</h6>
         </div>
      </section>
   </body>
</html>

Next Topic : Click Here