Open In App

Bulma | Select

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:



Last Updated : 27 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads