Open In App

Bulma Column Sizes

Last Updated : 04 Apr, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free and open-source CSS framework based on flexbox. It comes with pre-styled components, which makes it easier to develop beautiful and responsive websites, as we don’t have to style everything from the ground up. In this article, we will be seeing the Bulma Column Sizes.

There are three categories in Bulma Column Sizes, 12 columns system, Offset and Narrow column, all of them are briefly described below:

Bulma Column Sizes:

  • 12 columns system: Bulma provides us with a responsive grid system in which a container is divided into 12 columns, and we can resize our content according to the CSS classes provided by Bulma.
  • Offset: The offset modifier of the Bulma framework is used for adding horizontal spacing with the use of custom class values like “.is-offset-8” or “.is-offset-one-fourth”.
  • Narrow column:  If you want a column to only take the space it needs, you can append the is-narrow modifier on that column. The other columns will adjust themselves and fill up the remaining space.

Syntax:

<div class="column Bulma-Column-Sizes-Type">
...
</div>

The below examples will illustrate the Bulma Column Sizes:

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Column Sizes</title>
    <link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
    <b class="is-size-4">Bulma Column Sizes</b>
    <br />
    <strong>Bulma Narrow Column</strong>
    <div class="container is-fluid mt-6">
        <div class="columns">
            <div class="column is-narrow">
                <div class="notification is-link">
                    Column with <code>is-narrow</code> modifier.
                    It will take the width it needs
                </div>
            </div>
            <div class="column">
                <div class="notification is-warning">
                    Normal Column.
                    It will adjust itself to fill the row
                </div>
            </div>
        </div>
        <div class="columns">
            <div class="column">
                <div class="notification is-success">
                    Normal Column.
                    It will adjust itself to fill the row
                </div>
            </div>
            <div class="column is-narrow">
                <div class="notification is-danger">
                    Column with <code>is-narrow</code> modifier.
                    It will take the width it needs
                </div>
            </div>
        </div>
    </div>
    <strong>Bulma Offset</strong>
    <div class="columns is-mobile">
        <div class="column is-half 
                        is-offset-one-fifth
                        has-background-primary 
                        title my-4 p-4">
            This is column 1 with offset one fifth
        </div>
    </div>
    <div class="columns is-mobile">
        <div class="column is-three-fifths 
                        is-offset-one-fourth 
                        has-background-primary
                        title my-4 p-4">
            This is column 2 with offset one fourth
        </div>
    </div>
</body>
  
</html>
 






                        










Output:


 


Example 2:




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <title> Bulma Column Sizes </title> 


    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 


</head> 


  


<body class="has-text-centered"> 


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


        GeeksforGeeks 


    </h1> 


  


    <b class="is-size-4"> 


        Bulma Column Sizes 


    </b> 


    <br> 


    <strong> Bulma 12 Column System </strong> 


    <div class="container"> 


        <div class="columns"> 


            <div class="column is-12"> 


                <div class="notification is-success"> 


                    is-12 


                </div> 


            </div> 


        </div> 


  


        <!-- is-11 -->


        <div class="columns"> 


            <div class="column is-11"> 


                <div class="notification is-success"> 


                    is-11 


                </div> 


            </div> 


  


            <div class="column"> 


                <div class="notification is-secondary"> 


                    1 


                </div> 


            </div> 


        </div> 


  


        <!-- is-10 -->


        <div class="columns"> 


            <div class="column is-10"> 


                <div class="notification is-success"> 


                    is-10 


                </div> 


            </div> 


  


            <div class="column"> 


                <div class="notification is-secondary"> 


                    2 


                </div> 


            </div> 


        </div> 


  


        <!-- is-9 -->


        <div class="columns"> 


            <div class="column is-9"> 


                <div class="notification is-success"> 


                    is-9 


                </div> 


            </div> 


  


            <div class="column"> 


                <div class="notification is-secondary"> 


                    3 


                </div> 


            </div> 


        </div> 


  


        <!-- is-8 -->


        <div class="columns"> 


            <div class="column is-8"> 


                <div class="notification is-success"> 


                    is-8 


                </div> 


            </div> 


  


            <div class="column"> 


                <div class="notification is-secondary"> 


                    4 


                </div> 


            </div> 


        </div> 


  


        <!-- is-7 -->


        <div class="columns"> 


            <div class="column is-7"> 


                <div class="notification is-success"> 


                    is-7 


                </div> 


            </div> 


  


            <div class="column"> 


                <div class="notification is-secondary"> 


                    5 


                </div> 


            </div> 


        </div> 


  


        <!-- is-6 -->


        <div class="columns"> 


            <div class="column is-6"> 


                <div class="notification is-success"> 


                    is-6 


                </div> 


            </div> 


  


            <div class="column"> 


                <div class="notification is-secondary"> 


                    6 


                </div> 


            </div> 


        </div> 


  


        <!-- is-5 -->


        <div class="columns"> 


            <div class="column is-5"> 


                <div class="notification is-success"> 


                    is-5 


                </div> 


            </div> 


  


            <div class="column"> 


                <div class="notification is-secondary"> 


                    7 


                </div> 


            </div> 


        </div> 


  


        <!-- is-4 -->


        <div class="columns"> 


            <div class="column is-4"> 


                <div class="notification is-success"> 


                    is-4 


                </div> 


            </div> 


  


            <div class="column"> 


                <div class="notification is-secondary"> 


                    8 


                </div> 


            </div> 


        </div> 


  


        <!-- is-3 -->


        <div class="columns"> 


            <div class="column is-3"> 


                <div class="notification is-success"> 


                    is-3 


                </div> 


            </div> 


  


            <div class="column"> 


                <div class="notification is-secondary"> 


                    9 


                </div> 


            </div> 


        </div> 


  


        <!-- is-2 -->


        <div class="columns"> 


            <div class="column is-2"> 


                <div class="notification is-success"> 


                    is-2 


                </div> 


            </div> 


  


            <div class="column"> 


                <div class="notification is-secondary"> 


                    10 


                </div> 


            </div> 


        </div> 


    </div> 


</body> 


  


</html>



















                        







                        










Output:


 


Reference: https://bulma.io/documentation/columns/sizes/


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bulma Button States
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Autolinking in ReactJS
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bulma Different column sizes per breakpoint
            

        
    
        
            

                Bulma Button Sizes
            

        
    
        
            

                Bulma Delete Sizes
            

        
    
        
            

                Bulma Content Sizes
            

        
    
        
            

                Bulma Icon Sizes
            

        
    
        
            

                Bulma Textarea Sizes
            

        
    
        
            

                Bulma Input Sizes
            

        
    
        
            

                Bulma Select Sizes
            

        
    
        
            

                Bulma Tabs Sizes
            

        
    
        
            

                Bulma Tags Sizes
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
S

        

            
        

        

                                    


                                    

                                        skyridetim                                

                            

                            

            
                                

                            

                                                                    

                                        
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