Open In App

Bulma Block

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

Bulma is a free, open-source CSS framework based on Flexbox. It is used to create beautiful responsive websites using this framework. In this article, we will discuss the block class in Bulma.

Block is the spacer element that is used to provide a consistent margin between sibling elements. It is used when we want to place content in blocks and want to give space between each block. So using this, we can easily provide a margin between the elements.

Bulma Block Class:

  • block: This class is used to place the content in the blocks and provide space between them. If there are multiple blocks then we can easily place our content with the help of this class.

Syntax:

<div class="block">
    <!-- Some content -->
</div>

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
  
<body>
    <h1 class="is-size-2 has-text-success">
        GeeksforGeeks
    </h1>
    <b class="is-size-4">Bulma Block </b>
    <div class="block">
        <strong> GeeksforGeeks block 1</strong>
        A Computer Science portal for geeks.
        It contains well written, well
        thought and well explained computer
        science and programming articles.
    </div>
    <div class="block">
        <strong> GeeksforGeeks block 2</strong>
        A Computer Science portal for geeks.
        It contains well written, well
        thought and well explained computer
        science and programming articles.
    </div>
    <div class="block">
        <strong> GeeksforGeeks block 3</strong>
        A Computer Science portal for geeks.
        It contains well written, well
        thought and well explained computer
        science and programming articles.
    </div>
</body>
  
</html> 






                        










Output:


Bulma Block
Bulma Block


Example 2:




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <link rel='stylesheet' href= 


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


</head> 


  


<body> 


    <h1 class="is-size-2 has-text-success"> 


        GeeksforGeeks 


    </h1> 


  


    <b class="is-size-4">Bulma Block </b> 


      


    <div class="block"> 


        <input class="" type="text" placeholder="First name"> 


        <input class="" type="text" placeholder="Middle name"> 


        <input class="" type="text" placeholder="Last name"> 


    </div> 


    <div class="block"> 


        <input class="" type="text" placeholder="Phone"> 


        <input class="" type="text" placeholder="Email"> 


        <input class="" type="text" placeholder="Pincode"> 


    </div> 


    <div class="block"> 


        <input class="" type="text" placeholder="Address"> 


        <input class="" type="text" placeholder="Address"> 


    </div> 


    <div class="block"> 


        <button class="button is-primary"> 


            Submit 


        </button> 


    </div> 


</body> 


  


</html> 



















                        







                        










Output:


Bulma Block
Bulma Block


Reference: https://bulma.io/documentation/elements/block/


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bulma Columns Complete Reference
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bulma | Box
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bulma Mixins Block
            

        
    
        
            

                JavaScript ES2015: Block Scoping
            

        
    
        
            

                How block elements can be centered using CSS ?
            

        
    
        
            

                What is the difference between display: inline and display: inline-block in CSS?
            

        
    
        
            

                How to remove the space between inline-block elements?
            

        
    
        
            

                What is the difference between inline-flex and inline-block in CSS?
            

        
    
        
            

                CSS | margin-block Property
            

        
    
        
            

                CSS | border-block-start-style Property
            

        
    
        
            

                CSS | border-block-start-color Property
            

        
    
        
            

                CSS | border-block-start-width Property
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        singh_teekam                                

                            

                            

            
                                

                            

                                                                    

                                        
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