Bulma | List

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma List</title>
    <link rel='stylesheet' href=
  
    <!-- 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>

chevron_right


Output: 
 

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



html

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <title>Bulma List</title>
    <link rel='stylesheet' href=
  
    <!-- 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>

chevron_right


Output: 
 

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

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <title>Bulma List</title>
    <link rel='stylesheet' href=
  
    <!-- 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>

chevron_right


Output: 
 

Example 4: This example creating a differnet colors items.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma List</title>
    <link rel='stylesheet' href=
  
    <!-- 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>

chevron_right


Output: 
 

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

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma List</title>
    <link rel='stylesheet' href=
  
    <!-- 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>

chevron_right



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

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma List</title>
    <link rel='stylesheet' href=
  
    <!-- 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=
    </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>

chevron_right



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.
 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.