Bulma Button Sizes
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
Please Login to comment...