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:
Reference: https://bulma.io/documentation/form/select/#sizes