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=

'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>

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

Article Tags :

CSS

Web Technologies

Bulma