Open In App

Bulma Form Group

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

In this article, we’ll be seeing Bulma form group. Bulma allows the users to group the form fields together. Below are the different classes used in grouping the form fields together.

Bulma Form Group class:

  • is-grouped: This class is used for grouping the form controls.
  • is-grouped-centered: This class is used for grouping controls and aligning at the center.
  • is-grouped-right:  This class is used for grouping controls and aligning at right.
  • is-grouped-multiline: This class is used for grouping multiple lists of controls to fill up automatically.

Syntax:

 <div class="field is-grouped |is-grouped-centered 
             |is-grouped-right |is-group-multiline">
 ....
 </div>

Example 1: Below examples illustrate the form group classes. This example illustrates how the form components are grouped at the center and at the right.

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">
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
</head>
  
<body>
    <div class="container content has-text-centered">
        <h1 class="title has-text-success">
            GeeksforGeeks
        </h1>
        <h1 class="subtitle">Bulma form group</h1>
  
        <!-- Grouping -->
        <div class="field is-grouped">
            <label for="form" class="p-2">
                Default Grouping of Fields
            </label>
            <p class="control">
                <button class="button is-primary">
                    Find
                </button>
            </p>
  
            <p class="control">
                <button class="button is-light">
                    Search
                </button>
            </p>
        </div>
  
        <!-- Grouping  -->
        <div class="field is-grouped is-grouped-centered">
            <label for="form" class="p-2">
                Grouping Fields in center
            </label>
            <p class="control">
                <button class="button is-info">
                    Find
                </button>
            </p>
  
            <p class="control">
                <button class="button is-light">
                    Search
                </button>
            </p>
        </div>
  
        <!-- Grouping -->
        <div class="field is-grouped is-grouped-right">
            <label for="form" class="p-2">
                Grouping Fields in right
            </label>
            <p class="control">
                <button class="button is-warning">
                    Find
                </button>
            </p>
  
            <p class="control">
                <button class="button is-light">
                    Search
                </button>
            </p>
        </div>
    </div>
</body>
  
</html> 






                        










Output:


Bulma Form group


Example 2: In the below example, the form group multiline class is implemented and illustrates how the form components are grouped automatically.






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


</head> 


  


<body> 


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


    <!-- Multiline Grouping -->


    <div class="field is-grouped is-grouped-multiline content"> 


      <p class="control"> 


        <button class="button is-success">Find</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-success">Find</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-success">Find</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-success">Find</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-success">Find</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-success">Find</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-success">Find</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-success">Find</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-success">Find</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-success">Find</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-success">Find</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-info">Search</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-info">Search</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-info">Search</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-info">Search</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-info">Search</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-info">Search</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-info">Search</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-info">Search</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-info">Search</button> 


      </p> 


  


      <p class="control"> 


        <button class="button is-info">Search</button> 


      </p> 


  


    </div> 


  </div> 


</body> 


  


</html>



















                        







                        










Output:


Bulma Form group
Bulma Form group


Reference: https://bulma.io/documentation/form/general/#form-group


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bulma Form
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bulma Button group
            

        
    
        
            

                Bulma Button Group with Addons
            

        
    
        
            

                Semantic-UI Button Group Sizes Group Variations
            

        
    
        
            

                What are Group and Group-hover Classes in Tailwind CSS ?
            

        
    
        
            

                Bulma Disabled form
            

        
    
        
            

                Bulma Form Icons
            

        
    
        
            

                Bulma Form field
            

        
    
        
            

                Bulma Form Control
            

        
    
        
            

                Bulma Form Radio Button
            

        
    
        
            

                Bulma Horizontal Form
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
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