Bulma | Select
Bulma is a free, 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 carry out its design.
The ‘select’ component of a form is not that attractive in look. Using Bulma we can design select elements of the form in a far better way just by adding some simple Bulma classes. Bulma select elements are available in different colors, different styles, different sizes, and different states.
Example 1: This examples shows simple Bulma dropdown list.
<html> <head> <title>Bulma Select</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns{ margin-top: 80px; } </style> </head> <body> <div class='container'> <div class='columns is-mobile is-centered'> <div class='column is-5'> <div class="select"> <select> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> <option> Take pictures of beautiful flowers </option> </select> </div> </div> </div> </body></html> |
Output:
Example 2: This example shows select dropdown of different colors.
`<html> <head> <title>Bulma Select</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns{ margin-top: 80px; } div.select{ margin-bottom :3px; } </style> </head> <body> <div class='container'> <div class='columns is-mobile is-centered'> <div class='column is-5'> <div class="select is-primary"> <select> <option>Todos</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> <div class="select is-link"> <select> <option>Todos</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> <div class="select is-info"> <select> <option>Todos</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> <div class="select is-success"> <select> <option>Todos</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> <div class="select is-warning"> <select> <option>Todos</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> </div> <div class='column is-5'> <div class="select is-danger"> <select> <option>Todos</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> </div> </div> </body></html> |
Output:
Example 3: This example shows the “scrollable” or “multiple select dropdown”.
<html> <head> <title>Bulma Select</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns{ margin-top: 80px; } div.select{ margin-bottom :3px; } </style> </head> <body> <div class='container'> <div class='columns is-mobile is-centered'> <div class='column is-5'> <div class="select is-multiple"> <select multiple size='6'> <option>Todos</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> <option> Take pictures of beautiful flowers </option> <option> Ride to a horse and write your experience </option> <option> Watch movie 'Godfather' at night </option> <option>Go for a trip with bike</option> <option>Buy a sumsung headset</option> </select> </div> </div> </div> </div> </body></html> |
Output:
Example 4: This example shows select dropdown of different sizes.
<html> <head> <title>Bulma Select</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns{ margin-top: 80px; } div.select{ margin-bottom :3px; } </style> </head> <body> <div class='container'> <div class='columns is-mobile is-centered'> <div class='column is-5'> <div class="select is-small"> <select> <option>Todos(Small)</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> <div class="select"> <select> <option>Todos(Normal)</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> <div class="select is-medium"> <select> <option>Todos(Medium)</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> <div class="select is-large"> <select> <option>Todos(Large)</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> </div> </div> </div> </body></html> |
Output:
Example 5: This example shows rounded select dropdown.
<html> <head> <title>Bulma Select</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns{ margin-top: 80px; } div.select{ margin-bottom :3px; } </style> </head> <body> <div class='container'> <div class='columns is-mobile is-centered'> <div class='column is-5'> <div class="select is-rounded is-primary"> <select> <option>Todos</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> <div class="select is-rounded is-link"> <select> <option>Todos</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> <div class="select is-rounded is-info"> <select> <option>Todos</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> <div class="select is-rounded is-success"> <select> <option>Todos</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> <div class="select is-rounded is-warning"> <select> <option>Todos</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> <div class="select is-rounded is-danger"> <select> <option>Todos</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> </select> </div> </div> </div> </div> </body></html> |
Output:
Example 6: This example shows select dropdown with “font-awesome” icons.
<html> <head> <title>Bulma Select</title> <link rel='stylesheet' href= <!-- custom css --> <style> div.columns{ margin-top: 80px; } div.select{ margin-bottom :3px; } </style> </head> <body> <!-- font-awesome cdn --> <script src= </script> <div class='container'> <div class='columns is-mobile is-centered'> <div class='column is-5'> <div class="control has-icons-left"> <div class="select"> <select> <option>Todos</option> <option> Design a custom database to store your daily activity </option> <option> Start your E-commerce project to build </option> <option> Take pictures of beautiful flowers </option> </select> </div> <div class="icon is-small is-left"> <i class="fas fa-th-list"></i> </div> </div> </div> </div> </div> </body></html> |
Output:
Please Login to comment...