Open In App

Bulma | List

Last Updated : 10 Nov, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free and 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.
List component in the projects can be designed to look attractive with Bulma classes.

Example 1: This example creates a list of items using Bulma.

html




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma List</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: 80px;
        }
  
        h1 {
            width: 100%;
            margin-top: 70px;
            color: green !important
        }
  
        div.columns {
            margin-top: 20px;
        }
    </style>
</head>
  
<body>
    <div class='container'>
        <div>
            <h1 class='title 
                has-text-centered'>Todo List</h1>
        </div>
        <div class='columns is-mobile is-centered'>
            <div class='column is-5'>
                <div class='list'>
                    <ul>
                        <div class='list-item'>
                            <li>
                                Design a custom database 
                                to store your daily activity
                            </li>
                        </div>
  
                        <div class='list-item'>
                            <li>
                                Start your E-commerce 
                                project to build
                            </li>
                        </div>
  
                        <div class='list-item'>
                            <li>
                                Take pictures of 
                                beautiful flowers
                            </li>
                        </div>
  
                        <div class='list-item'>
                            <li>
                                Ride to a horse and 
                                write your experience
                            </li>
                        </div>
  
                        <div class='list-item'>
                            <li>
                                Watch movie 'Godfather' 
                                at night
                            </li>
                        </div>
  
                        <div class='list-item'>
                            <li>
                                Go for a trip with bike
                            </li>
                        </div>
  
                        <div class='list-item'>
                            <li>
                                Buy a sumsung headset
                            </li>
                        </div>
  
                        <div class='list-item'>
                            <li>
                                Listen music for one hour
                            </li>
                        </div>
  
                        <div class='list-item'>
                            <li>
                                Go for a Night 
                                out on bicycle
                            </li>
                        </div>
  
                        <div class='list-item'>
                            <li>
                                Go for a morning walk
                            </li>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html> 






                        










Output: 
 




Example 2: This example using Bulma to display the current active items.




html














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<html> 


  


<head> 


    <title>Bulma List</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: 80px; 


        } 


  


        h1 { 


            width: 100%; 


            margin-top: 70px; 


            color: green !important 


        } 


  


        div.columns { 


            margin-top: 20px; 


        } 


    </style> 


</head> 


  


<body> 


    <div class='container'> 


        <div> 


            <h1 class='title has-text-centered'> 


                Todo List 


            </h1> 


        </div> 


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


            <div class='column is-5'> 


                <div class='list'> 


                    <ul> 


                        <div class='list-item'> 


                            <li> 


                                Design a custom  


                                database to store  


                                your daily activity 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Start your E-commerce  


                                project to build 


                            </li> 


                        </div> 


  


                        <div class='list-item is-active'> 


                            <li> 


                                Take pictures of  


                                beautiful flowers 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Ride to a horse and  


                                write your experience 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Watch movie 'Godfather'  


                                at night 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Go for a trip with bike 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Buy a sumsung headset 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Listen music  


                                for one hour 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Go for a Night  


                                out on bicycle 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Go for a morning walk 


                            </li> 


                        </div> 


                    </ul> 


                </div> 


            </div> 


        </div> 


    </div> 


</body> 


  


</html> 



















                        







                        










Output: 
 




Example 3: This example creating a colored list of items using Bulma.




html














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<html> 


  


<head> 


    <title>Bulma List</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: 80px; 


        } 


  


        h1 { 


            width: 100%; 


            margin-top: 70px; 


            color: green !important 


        } 


  


        div.columns { 


            margin-top: 20px; 


        } 


  


        .list-item { 


            color: black !important; 


        } 


    </style> 


</head> 


  


<body> 


    <div class='container'> 


        <div> 


            <h1 class='title has-text-centered'> 


                Todo List 


            </h1> 


        </div> 


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


            <div class='column is-5'> 


                <div class='list has-background-info'> 


                    <ul> 


                        <div class='list-item'> 


                            <li> 


                                Design a custom  


                                database to store  


                                your daily activity 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Start your E-commerce  


                                project to build 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Take pictures of  


                                beautiful flowers 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Ride to a horse and  


                                write your experience 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Watch movie 'Godfather'  


                                at night 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Go for a trip  


                                with bike 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Buy a sumsung headset 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Listen music  


                                for one hour 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Go for a Night  


                                out on bicycle 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li> 


                                Go for a morning walk 


                            </li> 


                        </div> 


                    </ul> 


                </div> 


            </div> 


        </div> 


    </div> 


</body> 


  


</html> 



















                        







                        










Output: 
 




Example 4: This example creating a different colors items.




html














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <title>Bulma List</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: 80px; 


        } 


  


        h1 { 


            width: 100%; 


            margin-top: 70px; 


            color: green !important 


        } 


  


        div.columns { 


            margin-top: 20px; 


        } 


  


        .list-item { 


            color: black !important; 


        } 


    </style> 


</head> 


  


<body> 


    <div class='container'> 


        <div> 


            <h1 class='title has-text-centered'> 


                Todo List 


            </h1> 


        </div> 


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


            <div class='column is-5'> 


                <div class='list'> 


                    <ul> 


                        <div class='list-item  


                            has-background-primary'> 


                            <li> 


                                Design a custom  


                                database to store  


                                your daily activity 


                            </li> 


                        </div> 


  


                        <div class='list-item  


                            has-background-info'> 


                            <li> 


                                Start your E-commerce  


                                project to build 


                            </li> 


                        </div> 


  


                        <div class='list-item  


                            has-background-success'> 


                            <li> 


                                Take pictures of  


                                beautiful flowers 


                            </li> 


                        </div> 


  


                        <div class='list-item  


                            has-background-warning'> 


                            <li> 


                                Ride to a horse and  


                                write your experience 


                            </li> 


                        </div> 


  


                        <div class='list-item  


                            has-background-light'> 


                            <li> 


                                Watch movie 'Godfather'  


                                at night 


                            </li> 


                        </div> 


  


                        <div class='list-item  


                            has-background-dark'> 


                            <li> 


                                Go for a trip with bike 


                            </li> 


                        </div> 


  


                        <div class='list-item  


                            has-background-danger'> 


                            <li> 


                                Buy a sumsung headset 


                            </li> 


                        </div> 


                    </ul> 


                </div> 


            </div> 


        </div> 


    </div> 


</body> 


  


</html> 



















                        







                        










Output: 
 




Example 5: This example creating a Todo with delete link.




html














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <title>Bulma List</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: 80px; 


        } 


  


        h1 { 


            width: 100%; 


            margin-top: 70px; 


            color: green !important 


        } 


  


        div.columns { 


            margin-top: 20px; 


        } 


  


        .list-item { 


            color: black !important; 


        } 


  


        .tag { 


            float: right; 


        } 


    </style> 


</head> 


  


<body> 


    <div class='container'> 


        <div> 


            <h1 class='title has-text-centered'> 


                Todo List 


            </h1> 


        </div> 


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


            <div class='column is-6'> 


                <div class='list'> 


                    <ul> 


                        <div class='list-item'> 


                            <li> 


                                Design a custom database to store  


                                your daily activity 


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


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li>Start your E-commerce project to build 


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


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li>Take pictures of beautiful flowers 


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


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li>Ride to a horse and write your experience 


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


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li>Watch movie 'Godfather' at night 


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


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li>Go for a trip with bike 


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


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li>Buy a sumsung headset 


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


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li>Listen music for one hour 


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


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li>Go for a Night out on bicycle 


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


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <li>Go for a morning walk 


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


                            </li> 


                        </div> 


                    </ul> 


                </div> 


            </div> 


        </div> 


    </div> 


</body> 


  


</html> 



















                        







                        








                





Example 6: This example create a list items with symbol and delete link.




html














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <title>Bulma List</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: 80px; 


        } 


  


        h1 { 


            width: 100%; 


            margin-top: 70px; 


            color: green !important 


        } 


  


        div.columns { 


            margin-top: 20px; 


        } 


  


        .list-item { 


            color: black !important; 


        } 


  


        .tags { 


            margin-bottom: 0px !important; 


        } 


  


        .tag { 


            float: left; 


        } 


  


        .tag.is-delete { 


            float: right 


        } 


    </style> 


</head> 


  


<body> 


    <!-- font-awesome cdn -->


    <script src= 


'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'> 


    </script> 


  


    <div class='container'> 


        <div> 


            <h1 class='title has-text-centered'> 


                Todo List 


            </h1> 


        </div> 


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


            <div class='column is-6'> 


                <div class='list'> 


                    <ul> 


                        <div class='list-item tags'> 


                            <span class='tag is-white'> 


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


                            </span> 


                            <li> 


                                Design a custom database 


                                to store your daily activity 


                                <a class="tag is-delete  


                                        is-danger"></a> 


                            </li> 


                        </div> 


  


                        <div class='list-item tags'> 


                            <span class='tag is-white'> 


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


                            </span> 


                            <li> 


                                Take pictures of  


                                beautiful flowers 


                                <a class="tag is-delete  


                                    is-danger"></a> 


                            </li> 


                        </div> 


  


                        <div class='list-item tags'> 


                            <span class='tag is-white'> 


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


                            </span> 


                            <li> 


                                Ride to a horse and  


                                write your experience 


                                <a class="tag is-delete  


                                    is-danger"></a> 


                            </li> 


                        </div> 


  


                        <div class='list-item tags'> 


                            <span class='tag is-white'> 


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


                            </span> 


                            <li> 


                                Go for a trip with bike 


                                <a class="tag is-delete  


                                    is-danger"></a> 


                            </li> 


                        </div> 


  


                        <div class='list-item tags'> 


                            <span class='tag is-white'> 


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


                            </span> 


                            <li> 


                                Buy a sumsung headset 


                                <a class="tag is-delete  


                                    is-danger"></a> 


                            </li> 


                        </div> 


  


                        <div class='list-item tags'> 


                            <span class='tag is-white'> 


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


                            </span> 


                            <li> 


                                Listen music for one hour 


                                <a class="tag is-delete  


                                    is-danger"></a> 


                            </li> 


                        </div> 


  


                        <div class='list-item'> 


                            <span class='tag is-white'> 


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


                            </span> 


                            <li> 


                                Go for a morning walk 


                                <a class="tag is-delete  


                                    is-danger"></a> 


                            </li> 


                        </div> 


                    </ul> 


                </div> 


            </div> 


        </div> 


    </div> 


</body> 


  


</html> 



















                        







                        








                





Note: Here in all the above examples, we use some extra bulma classes like container, column, title, button, tags etc. to design our the content well.
 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Ruby | Enumerable first() function
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bulma | Button
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bulma Buttons List
            

        
    
        
            

                Bulma Tags List
            

        
    
        
            

                Bulma List of all spacing helpers
            

        
    
        
            

                Bulma Align items
            

        
    
        
            

                Bulma Tiles
            

        
    
        
            

                Bulma Flexbox
            

        
    
        
            

                Bulma | Tabs
            

        
    
        
            

                Bulma Notification Colors
            

        
    
        
            

                Bulma Extends
            

        
    
        
            

                Bulma Responsiveness
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        hunter__js                                

                            

                            

            
                                

                            

                                                                    

                                        
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