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 using the HTML <select> multiple attributes.
Multiple select classes:
- is-multiple: It is used to create multiple select items menu from the dropdown list.
Syntax:
<div class="select is-multiple"> <select multiple size=""> <option value=""> ... </option> </select> </div>
Example:
HTML
<!DOCTYPE html> < html > < head > < title >Bulma Multiple select</ title > < link rel = 'stylesheet' href = 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css' > </ head > < body class = "has-text-centered" > < h1 class = "is-size-1 has-text-success" > w3wiki </ h1 > < p class = "is-size-3" >Bulma Multiple select</ p > < div class = "container" > < div class = "select is-multiple" > < select multiple size = "5" > < option value = "webdev" >Web Technology</ option > < option value = "html" >HTML</ option > < option value = "css" >CSS</ option > < option value = "js" >JavaScript</ option > < option value = "php" >PHP</ option > </ select > </ div > </ div > </ body > </ html > |
Output:
Reference: https://bulma.io/documentation/form/select/#multiple-select