Bulma Button Group with Addons

In this article, we'll see the Bulma button group with addons. As we know that we can add addons with buttons in form controls of Bulma, similarly we can also group two or more button addons to make a group. For making a group with add-ons, we can create two or more field containers with has-addons class inside them.

Bulma Button Group with Addons Class:

• has-addons: This class is used to combine the button controls together in a container. Using two has-addons classes in a field container can group multiple button addons.

Syntax:

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

Example 1: Below example illustrates the Bulma button group with addons.

Output:

👁 Bulma Button Group with Addons

Example 2: This example illustrates the colored Bulma button group with addons.

Output:

👁 Bulma Button Group with Addons

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