Bulma Button Addons

Bulma is an open-source CSS framework that provides pre-built components which can be combined together to make responsive websites and web applications. To use buttons as add-ons, we have to add a has-addons class on the field container. This will attach the buttons together.

Bulma Button addons Class:

has-addons: If this class is added on a field container, the controls inside the container will attach together

Syntax:

<div class="field has-addons">
    <p class="control">
       <button class="button">
          ...
       </button>
    </p>
</div>

Example: In the example below, we used three buttons inside a field container and added a has-addons modifier to the field container.

HTML

<!DOCTYPE html>

<html>
 
<head>

    <title>Bulma Buttons as Addons</title>

    <link rel='stylesheet'

          href=

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

    <style>

        .field.has-addons {

            justify-content: center;

        }

    </style>

</head>
 
<body class="has-text-centered">

    <h1 class="is-size-2 has-text-success">

      GeeksforGeeks</h1>

    <b>Bulma Buttons as Addons</b>

    <br><br>

    <div class="container">

        <div class="field has-addons">

            <p class="control">

                <button class="button">

                    Left

                </button>

            </p>
 
            <p class="control">

                <button class="button">

                    Center

                </button>

            </p>
 
            <p class="control">

                <button class="button">

                    Right

                </button>

            </p>
 
        </div>

    </div>

</body>
 
</html>

Output:

Reference: https://bulma.io/documentation/elements/button/#button-addons

Article Tags :

CSS

Web Technologies

Bulma