Open In App

Bulma Button Group with Addons

Last Updated : 22 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we’ll see the Bulma button group with addons. As we know that we can add addons with buttons in form controls of Bulma, similarly we can also group two or more button addons to make a group. For making a group with add-ons, we can create two or more field containers with has-addons class inside them.

Bulma Button Group with Addons Class:

  • has-addons: This class is used to combine the button controls together in a container. Using two has-addons classes in a field container can group multiple button addons.

Syntax:

<div class="field has-addons">
    <p class="control">
       <button class="button">
          ....
       </button>
    </p>
</div>
....

Example 1: Below example illustrates the Bulma button group with addons.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>GFG</title>
    <link
      rel="stylesheet"
      href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
    <script src=
"https://use.fontawesome.com/releases/v5.15.4/js/all.js">
  </script>
  </head>
  <body>
    <div class="content container has-text-centered">
      <h1 class="title has-text-success">GeekforGeeks</h1>
      <h1 class="subtitle">Bulma Button Group with addons</h1>
  
      <div class="field has-addons">
        <p class="control">
          <button class="button">
            <span class="icon is-small">
              <i class="fas fa-list"></i>
            </span>
            <span>Option</span>
          </button>
        </p>
  
        <p class="control">
          <button class="button">
            <span class="icon is-small">
              <i class="fas fa-trash"></i>
            </span>
            <span>Delete</span>
          </button>
        </p>
  
        <p class="control">
          <button class="button">
            <span class="icon is-small">
              <i class="fas fa-copy"></i>
            </span>
            <span>Copy</span>
          </button>
        </p>
  
      </div>
        
      <div class="field has-addons">
        <p class="control">
          <button class="button is-info">
            <span class="icon is-small">
              <i class="fab fa-facebook"></i>
            </span>
            <span>Facebook</span>
          </button>
        </p>
  
        <p class="control">
          <button class="button is-dark">
            <span class="icon is-small">
              <i class="fab fa-github"></i>
            </span>
            <span>GitHub</span>
          </button>
        </p>
  
        <p class="control">
          <button class="button is-danger">
            <span class="icon is-small">
              <i class="fab fa-instagram"></i>
            </span>
            <span>Instagram</span>
          </button>
        </p>
  
        <p class="control">
          <button class="button">
            <span class="icon is-small">
              <i class="fab fa-twitter"></i>
            </span>
            <span>Twitter</span>
          </button>
        </p>
  
      </div>
    </div> 
</body>
</html>
 






                        










Output:


Bulma Button Group with Addons
Bulma Button Group with Addons


Example 2: This example illustrates the colored Bulma button group with addons.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


<head> 


    <meta charset="UTF-8"> 


    <meta http-equiv="X-UA-Compatible" 


          content="IE=edge"> 


    <meta name="viewport" 


          content="width=device-width, initial-scale=1.0"> 


    <title>GFG</title> 


    <link


      rel="stylesheet"


      href= 


"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"


    /> 


    <script src= 


"https://use.fontawesome.com/releases/v5.15.4/js/all.js"> 


    </script> 


  </head> 


  <body> 


    <div class="content container has-text-centered"> 


      <h1 class="title has-text-success">GeekforGeeks</h1> 


      <h1 class="subtitle">Bulma Button Group with addons</h1> 


  


      <div class="field has-addons"> 


        <p class="control"> 


          <button class="button"> 


            <span class="icon is-small"> 


              <i class="fas fa-thumbs-up"></i> 


            </span> 


          </button> 


        </p> 


  


        <p class="control"> 


          <button class="button"> 


            <span class="icon is-small"> 


              <i class="fas fa-thumbs-down"></i> 


            </span> 


          </button> 


        </p> 


  


        <p class="control"> 


          <button class="button"> 


            <span class="icon is-small"> 


              <i class="fas fa-thumbtack"></i> 


            </span> 


          </button> 


        </p> 


  


      </div> 


        


      <div class="field has-addons"> 


        <p class="control"> 


          <button class="button"> 


            <span class="icon is-small"> 


              <i class="fas fa-bold"></i> 


            </span> 


            <span>Bold</span> 


          </button> 


        </p> 


  


        <p class="control"> 


          <button class="button"> 


            <span class="icon is-small"> 


              <i class="fas fa-italic"></i> 


            </span> 


            <span>Italic</span> 


          </button> 


        </p> 


  


        <p class="control"> 


          <button class="button "> 


            <span class="icon is-small"> 


              <i class="fas fa-underline"></i> 


            </span> 


            <span>Underline</span> 


          </button> 


        </p> 


  


      </div> 


    </div>  


</body> 


</html>



















                        







                        










Output:


Bulma Button Group with Addons
Bulma Button Group with Addons


Reference: https://bulma.io/documentation/elements/button/#button-group-with-addons


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bulma Button Addons
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bulma Button Addons
            

        
    
        
            

                Bootstrap 5 Input Group Button Addons
            

        
    
        
            

                Bulma Form Addons
            

        
    
        
            

                Bulma Tag Addons
            

        
    
        
            

                Bootstrap 5 Input group Multiple addons
            

        
    
        
            

                Angular PrimeNG Form InputGroup Button Addons Component
            

        
    
        
            

                Bulma Button group
            

        
    
        
            

                Semantic-UI Button Group Sizes Group Variations
            

        
    
        
            

                ReactJS Semantic UI TransitionablePortal Addons
            

        
    
        
            

                ReactJS Semantic UI Radio Addons
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        tarunsinghwap7                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        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