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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

Example 2: This example shows select dropdown of different colors.

filter_none

edit
close

play_arrow

link
brightness_4
code

`
<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>

chevron_right


Output:



Example 3: This example shows the “scrollable” or “multiple select dropdown”.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

Example 4: This example shows select dropdown of different sizes.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

Example 5: This example shows rounded select dropdown.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

Example 6: This example shows select dropdown with “font-awesome” icons.

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:




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 :

Be the First to upvote.


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