Bulma | List - GeeksforGeeks

10 Nov, 2021
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. 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
surinderdawra388
Bulma
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)