Bulma Select Sizes

Bulma is a free and open-source CSS framework used to build beautiful and responsive websites. Bulma Select Size classes are used to set the size of the select dropdown. The select element has 4 different sizes: small, normal, medium, and large.

Select Size Classes:

is-small: This class is used to set the select size to small.
is-normal: This class sets the select size to normal.
is-medium: This class is used to set the select size to medium.
is-large: This class is used to set the select size to large.

Syntax:

<div class="select is-normal">
 <select>
   <option selected>Algorithms</option>
   <option>Data Structures</option>
 </select>
</div>

Example: The below example shows the use of select size classes in Bulma.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Bulma Select Sizes</title>
    <link rel='stylesheet' 
          href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>

    <style>
        .container>div{
            margin-top: 25px;
        }
    </style>
</head>

<body class="has-text-centered">
    <h1 class="is-size-2 has-text-success">
      GeeksforGeeks
    </h1>
    <b>Bulma Select Sizes</b>
    <div class="container">
        <div>
            <span>Small Size:</span>
            <div class="select is-small">
                <select>
                    <option selected>Select dropdown</option>
                    <option>Data Structures</option>
                    <option>Algorithms</option>
                    <option>DBMS</option>
                </select>
            </div>
        </div>
        
        <div>
            <span>Normal Size:

            </span>
            <div class="select is-normal">
                <select>
                    <option selected>Select dropdown</option>
                    <option>Data Structures</option>
                    <option>Algorithms</option>
                    <option>DBMS</option>
                </select>
            </div>
        </div>
        <div>
            <span>Medium Size: </span>
            <div class="select is-medium">
                <select>
                    <option selected>Select dropdown</option>
                    <option>Data Structures</option>
                    <option>Algorithms</option>
                    <option>DBMS</option>
                </select>
            </div>
        </div>
       <div>
           <span>Large Size:

           </span>
           <div class="select is-large">
            <select>
                <option selected>Select dropdown</option>
                <option>Data Structures</option>
                <option>Algorithms</option>
                <option>DBMS</option>
            </select>
        </div>
       </div>
    </div>
</body>

</html>

Output:

Reference: https://bulma.io/documentation/form/select/#sizes

Explore