Bulma Button Sizes
Last Updated :
09 Feb, 2022
Bulma Button size class is used to set the size of the button. The button in Bulma comes in four different sizes: small, medium, normal, and large. You can set the button size using one of 4 CSS classes provided by Bulma. The default size of a button is normal.
Button Size Classes:
- is-small: This class is used to set the button size to small
- is-normal: This class sets the button size to normal.
- is-medium: This class is used to set the button size to medium.
- is-large: This class is used to set the button size to large.
Syntax:
<button class="button is-large">
Button
</button>
Example: The below example illustrates the button size classes in Bulma.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Bulma Button Sizes</ title >
< link rel = 'stylesheet' href =
</ head >
< body class = "has-text-centered" >
< h1 class = "is-size-2 has-text-success" >
GeeksforGeeks
</ h1 >
< b >Bulma Button Sizes</ b >
< div class = "container" >
< button class = "button is-small" >
Small Button size
</ button >
< button class = "button" >
Default Button Size
</ button >
< button class = "button is-normal" >
Normal Button Size
</ button >
< br >
< br >
< button class = "button is-medium" >
Medium Button Size
</ button >
< button class = "button is-large" >
Large Button Size
</ button >
</ div >
</ body >
</ html >
|
Output:
Reference: https://bulma.io/documentation/elements/button/#sizes
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...