Bulma | Select - GeeksforGeeks

27 Jul, 2020
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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>      <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>      <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>      <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>      <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>      <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>      <!-- custom css -->    <style>      div.columns{        margin-top: 80px;      }        div.select{        margin-bottom :3px;      }    </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 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:
Bulma
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills