Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:

Bulma Button Sizes

Reference: https://bulma.io/documentation/elements/button/#sizes


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!