Open In App

Bulma Select Sizes

Improve
Improve
Like Article
Like
Save
Share
Report

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=
 
    <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:

Bulma Select Sizes

Bulma Select Sizes

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



Last Updated : 09 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads