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

        GeeksforGeeks 

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

Article Tags :

CSS

Web Technologies

Bulma

Bulma-Form