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