Open In App
Related Articles

Bulma | Tags

Improve Article
Improve
Save Article
Save
Like Article
Like

Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.
The Bulma tag is a small element that is very useful to attach information to a block or other component.

Example 1: Simple Tag elements




<html>
  <head>
    <title>Bulma Tag</title>
    <link rel='stylesheet' 
          href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
    <!-- custom css -->
    <style>
      div.columns{
        margin-top: 50px;
      }
   
      h1{
        color:green !important;
        margin-bottom: 20px;
      }
  
      span{
        margin-right:5px;
      }
  
    </style>
  </head>
  <body>
    <div class='container has-text-centered'>
      <div class='columns is-mobile is-centered'>
        <div class='column is-8'>
          <div>
            <h1 class='title'>Tag Elements</h1>
            <hr>
          </div>
  
          <div>
            <span class="tag">
              Tag1
            </span>
            <span class="tag">
              Tag2
            </span>
            <span class="tag">
              Tag3
            </span>
            <span class="tag">
              Tag4
            </span>
            <span class="tag">
              Tag5
            </span>
            <span class="tag">
              Tag6
            </span>
            <span class="tag">
              Tag7
            </span>
            <span class="tag">
              Tag8
            </span>
            <span class="tag">
              Tag9
            </span>
            <span class="tag">
              Tag10
            </span>
          </div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html> 






                        








Output: 




Example 2: Coloured Tag elements











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<html> 


  <head> 


    <title>Bulma Tag</title> 


    <link rel='stylesheet' href= 


'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 


    <!-- custom css -->


    <style> 


      div.columns{ 


        margin-top: 50px; 


      } 


   


      h1{ 


        color:green !important; 


        margin-bottom: 20px; 


      } 


  


      span{ 


        margin-right:5px; 


      } 


  


    </style> 


  </head> 


  <body> 


    <div class='container has-text-centered'> 


      <div class='columns is-mobile is-centered'> 


        <div class='column is-8'> 


          <div> 


            <h1 class='title'>Coloured Tag Elements</h1> 


            <hr> 


          </div> 


  


          <div> 


            <span class="tag is-primary"> 


              Primary 


            </span> 


            <span class="tag is-info"> 


              Info 


            </span> 


            <span class="tag is-link"> 


              Link 


            </span> 


            <span class="tag is-success"> 


              Success 


            </span> 


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


            <span class="tag is-warning"> 


              Warning 


            </span> 


            <span class="tag is-danger"> 


              Danger 


            </span> 


          </div> 


        </div> 


      </div> 


    </div> 


    </div> 


  </body> 


</html> 



















                        







                        








Output: 




Example 3:  Different sizes Tag elements











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<html> 


  <head> 


    <title>Bulma Tag</title> 


    <link rel='stylesheet' href= 


'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 


    <!-- custom css -->


    <style> 


      div.columns{ 


        margin-top: 50px; 


      } 


   


      h1{ 


        color:green !important; 


        margin-bottom: 20px; 


      } 


  


      span{ 


        margin-right:5px; 


      } 


  


    </style> 


  </head> 


  <body> 


    <div class='container has-text-centered'> 


      <div class='columns is-mobile is-centered'> 


        <div class='column is-8'> 


          <div> 


            <h1 class='title'> 


                Different sizes Tag Elements 


            </h1> 


            <hr> 


          </div> 


  


          <div> 


            <span class="tag is-primary is-normal"> 


              Normal 


            </span> 


            <span class="tag is-info is-medium"> 


              Medium 


            </span> 


            <span class="tag is-link is-large"> 


              Large 


            </span> 


              


          </div> 


        </div> 


      </div> 


    </div> 


    </div> 


  </body> 


</html> 



















                        







                        








Output: 




Example 4: Rounded Tag elements











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<html> 


  <head> 


    <title>Bulma Tag</title> 


    <link rel='stylesheet' href= 


'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 


    <!-- custom css -->


    <style> 


      div.columns{ 


        margin-top: 50px; 


      } 


   


      h1{ 


        color:green !important; 


        margin-bottom: 20px; 


      } 


  


      span{ 


        margin-right:5px; 


      } 


  


    </style> 


  </head> 


  <body> 


    <div class='container has-text-centered'> 


      <div class='columns is-mobile is-centered'> 


        <div class='column is-8'> 


          <div> 


            <h1 class='title'>Rounded Tag Elements</h1> 


            <hr> 


          </div> 


  


          <div> 


            <span class="tag is-primary is-rounded"> 


              Primary 


            </span> 


            <span class="tag is-info is-rounded"> 


              Info 


            </span> 


            <span class="tag is-link is-rounded"> 


              Link 


            </span> 


            <span class="tag is-success is-rounded"> 


              Success 


            </span> 


            <span class="tag is-black is-rounded"> 


              Black 


            </span> 


             <span class="tag is-warning is-rounded"> 


              Warning 


            </span> 


            <span class="tag is-danger is-rounded"> 


              Danger 


            </span> 


          </div> 


        </div> 


      </div> 


    </div> 


    </div> 


  </body> 


</html> 



















                        







                        








Output: 




Example 5: Text tag element with delete tag element











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<html> 


  <head> 


    <title>Bulma Tag</title> 


    <link rel='stylesheet' href= 


'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 


    <!-- custom css -->


    <style> 


      div.columns{ 


        margin-top: 50px; 


      } 


   


      h1{ 


        color:green !important; 


        margin-bottom: 20px; 


      } 


  


      div.tags{ 


        display:flex; 


        float:left; 


        margin-right:10px; 


      } 


  


    </style> 


  </head> 


  <body> 


    <div class='container has-text-centered'> 


      <div class='columns is-mobile is-centered'> 


        <div class='column is-8'> 


          <div> 


            <h1 class='title'> 


 Text Tag Element with Delete Tag Element  


            </h1> 


            <hr> 


          </div> 


  


          <div> 


            <div class="tags has-addons"> 


              <span class="tag is-link">Javascript</span> 


              <a class="tag is-delete"></a> 


            </div> 


  


            <div class="tags has-addons"> 


              <span class="tag is-link">Node.Js</span> 


              <a class="tag is-delete"></a> 


            </div> 


  


            <div class="tags has-addons"> 


              <span class="tag is-link">Angular</span> 


              <a class="tag is-delete"></a> 


            </div> 


  


            <div class="tags has-addons"> 


              <span class="tag is-link">React</span> 


              <a class="tag is-delete"></a> 


            </div> 


  


            <div class="tags has-addons"> 


              <span class="tag is-link">Vue</span> 


              <a class="tag is-delete"></a> 


            </div> 


  


            <div class="tags has-addons"> 


              <span class="tag is-link">Bulma Css</span> 


              <a class="tag is-delete"></a> 


            </div> 


  


            <div class="tags has-addons"> 


              <span class="tag is-link">Mongo DB</span> 


              <a class="tag is-delete"></a> 


            </div> 


              


            <div class="tags has-addons"> 


              <span class="tag is-link">Python</span> 


              <a class="tag is-delete"></a> 


            </div> 


              


          </div> 


        </div> 


      </div> 


    </div> 


    </div> 


  </body> 


</html> 



















                        







                        










Example 6:  Tags attach together











                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<html> 


  <head> 


    <title>Bulma Tag</title> 


    <link rel='stylesheet' href= 


'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> 


    <!-- custom css -->


    <style> 


      div.columns{ 


        margin-top: 50px; 


      } 


   


      h1{ 


        color:green !important; 


        margin-bottom: 20px; 


      } 


  


      div.tags{ 


        display:flex; 


        float:left; 


        margin-right:10px; 


      } 


  


    </style> 


  </head> 


  <body> 


    <div class='container has-text-centered'> 


      <div class='columns is-mobile is-centered'> 


        <div class='column is-8'> 


          <div> 


            <h1 class='title'>Tags attach together</h1> 


            <hr> 


          </div> 


  


          <div class="control"> 


            <div class="tags has-addons"> 


              <span class="tag is-success">Yes</span> 


              <span class="tag is-danger">No</span> 


            </div> 


  


            <div class="tags has-addons"> 


              <span class="tag is-info">Show</span> 


              <span class="tag is-warning">Hide</span> 


            </div> 


  


            <div class="tags has-addons"> 


              <span class="tag is-success">Node.Js</span> 


              <span class="tag is-danger">NPM</span> 


            </div> 


  


            <div class="tags has-addons"> 


              <span class="tag is-primary">CSS</span> 


              <span class="tag is-info">Bulma</span> 


            </div> 


  


            <div class="tags has-addons"> 


              <span class="tag is-warning">Javascript</span> 


              <span class="tag is-danger">Angular</span> 


            </div> 


  


            <div class="tags has-addons"> 


              <span class="tag is-warning">Javascript</span> 


              <span class="tag is-primary">React</span> 


            </div> 


              


          </div> 


        </div> 


      </div> 


    </div> 


    </div> 


  </body> 


</html> 



















                        







                        








Output: 




                                            
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!


                                                                

                                                                    

                                        Last Updated : 
                                        24 Jun, 2020
                                    

                                                                

                                    Like Article
                                    
                                

                                

                                    Save Article
                                    
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bulma | Table
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bulma Title
                                    

                                

                            
                            

                          



                            

                            
                            
                                     
                        


                        
                                                    

                                

                                    

                                        Similar Reads                                    
                                    

                                    
      
                                        
        
            

                Bulma Tags Sizes
            

        
    
        
            

                Bulma Tags Colors
            

        
    
        
            

                Bulma Tags Modifiers
            

        
    
        
            

                Bulma Tags Combinations
            

        
    
        
            

                Bulma Tags List
            

        
    
        
            

                Bulma Tags Variables
            

        
    
        
            

                W3.CSS Tags
            

        
    
        
            

                How to Create Tags Input Box in HTML CSS and JavaScript ?
            

        
    
        
            

                Bulma Align items
            

        
    
        
            

                Bulma Tiles
            

        
                                        

                                

                            

                                                                                

                                    

                                        

                                            Complete Tutorials                                  
                                        

                                        

                                            
        
            

                JavaScript Project Ideas with Source Code
            

        
    
        
            

                Onsen UI
            

        
    
        
            

                React Material UI
            

        
    
        
            

                NuxtJS
            

        
    
        
            

                D3.js
            

        
                                            

                                    

                                

                                                
                        

                            

                                

                                    
                                                                    

                            


                        

                        

                            
                            

                                

                                    
Article Contributed By :

                                    

                                        
author
        

            
        

        

        

            

                hunter__js
            

            

                hunter__js
            

            

                                    

                                

                                

                                    
Vote for difficulty

                                                                        

                                        

                                            
                                            
                                            
                                            
                                            
                                        

                                        

                                    

                                

                            

                            

                                                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                            

                                

                                    

                                    
                                        Report Issue 
                                    
                                

                                
                            

                            

                              

                            

                            
                        


                    



                

            

        

        

        

            
			
		
	            
        

    

    

        

            

            

        

    












	

    
  

  
  






    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
    
    







   Lightbox