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>
#css #web technologies #bulma
1.75 GEEK