Open In App

Bulma | Select

Last Updated : 27 Jul, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

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:



Previous Article
Next Article

Similar Reads

Bulma Select Colors
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 implement its design. The Bulma select color is used to set the color on the select element. The color is applied on the border and dropdown icon of the select menu. Bulma select c
2 min read
Bulma Multiple 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 implement its design. Bulma multiple select is used to create a style of multiple select dropdown items. The multiple select items are created by using is-multiple modifiers by usi
1 min read
Bulma Select Styles
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 implement its design. Bulma select style is used to set the style on the select elements. There is only a single style that is used in the select element. This style is used to cre
1 min read
Bulma Select Sizes
Bulma is a free and open-source CSS framework used to build beautiful and responsive websites. Bulma Select Size classes are used to set the size of the select dropdown. The select element has 4 different sizes: small, normal, medium, and large. Select Size Classes: is-small: This class is used to set the select size to small.is-normal: This class
2 min read
Bulma Select States
Bulma is an open-source CSS framework used to make fast and responsive websites. Bulma Select State classes are used to style the select dropdown according to a specific state. Using Bulma state classes we can style the select element like if it is being hovered or is in focus without triggering that state. Bulma Select State Classes: is-hovered: T
2 min read
Bulma Select With Icons
Bulma is an open-source CSS framework that lets you use predefined classes to style your website and web applications. In this article, we will be seeing how to add icons to the select dropdown in Bulma. To add an icon to the select dropdown we can wrap the select container in a control div and use the has-icons-left modifier on the control div. We
2 min read
How to remove all the options of a select box and then add one option and select it using JQuery ?
Given a select box with a fixed number of options, the task is to remove all the options and then add one option and immediately select that particular option using jQuery. There are two approaches that can be taken to achieve this: Approach 1: Using find(), remove(), end() and append() Methods: In the following example, a select box with some opti
3 min read
Select different values on two select tags in Vue.js
In this article, we will see the selection of different values on a single select and two &lt;select&gt; tags in vue.js, along with understanding their basic implementation through the examples. HTML &lt;select&gt; tag is used to create a drop-down list. Adding a list of options inside the drop-down list using the &lt;option&gt; tag. when we select
6 min read
Bulma Align items
Bulma is a modern, free and open-source CSS framework built on flexbox. It comes with pre-styled components and elements that let you create beautiful and responsive websites fast. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. Bulma align-items classes are used to
3 min read
Bulma Flexbox
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. A flexbox is a layout used to define various columns and rows that makes the grid-like structure. It is used to design a flexible responsive layout structu
3 min read
Article Tags :