Bulma Buttons List

Bulma Button List is used to group buttons in a list. Button List can be created by wrapping the buttons in an HTML div with class buttons. If the list is longer than the current viewport width, the buttons will be wrapped on multiple lines while keeping the spacing between the buttons constant.

Button List Classes:

• buttons: This class is used on the container of all buttons to make a button list.
• is-centered: This class is used to align the button list to the center.
• is-right: This class is used to align the button list to the right.
• has-addons: This class is used on the buttons container to attach the buttons inside it together.

Syntax:

<div class="buttons">
 <button class="button">Button 1</button>
</div>

Simple Button LIsts: In this example, we created a simple HTML div with class buttons and created three buttons inside the buttons container. This makes a button list.

Example 1: This is an example of a Simple Button List.

Output:

👁 Bulma Buttons List

Wrapped Button List: When the button list goes beyond the width of the viewport, the buttons will be wrapped on the next lines. The below example shows the same.

Example 2: This is an example of a Wrapped Button List.

Output:

👁 Bulma Buttons List

Button List Alignment: The Button List is left-aligned by default. The is-centered and is-right modifiers can be used to align the content in center or right respectively.

Syntax:

<div class="buttons is-centered">
 <button class="button">Button 1</button>
</div>

Example 3: This is an example of a Button List Alignment. The top button list is left-aligned by default, the middle button list uses an is-centered modifier to align the buttons to the middle of the page while the bottom button list uses an is-right modifier to align the buttons to the right.

Output:

👁 class=

Buttons in the list as addons: Buttons in a list can be attached using the has-addon modifier on the button container. To differentiate a button from others any custom class can be used to modify the styles but an is-selected modifier should be used with the modifier class to make sure the selected button is above its siblings.

Syntax:
<div class="buttons has-addons">
 <button class="button">Button 1</button>
</div>

Example:

Output:

👁 class=

Reference: https://bulma.io/documentation/elements/button/#list-of-buttons