Bulma Buttons List
Last Updated :
20 Jan, 2022
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Simple Button Lists</title>
<link rel='stylesheet'
href=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b>Bulma Simple Button Lists</b>
<div class="container" style="margin-top: 30px;">
<div class="buttons is-centered">
<button class="button is-success">Button 1</button>
<button class="button is-link">Button 2</button>
<button class="button is-warning">Button 3</button>
</div>
</div>
</body>
</html>
|
Output:
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Wrapped Button Lists</title>
<link rel='stylesheet' href=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b>Bulma Wrapped Button Lists</b>
<div class="container" style="margin-top: 30px;">
<div class="buttons is-centered">
<button class="button is-success">Button 1</button>
<button class="button is-link">Button 2</button>
<button class="button is-warning">Button 3</button>
<button class="button is-success">Button 4</button>
<button class="button is-link">Button 5</button>
<button class="button is-warning">Button 6</button>
<button class="button is-success">Button 7</button>
<button class="button is-link">Button 8</button>
<button class="button is-warning">Button 9</button>
<button class="button is-success">Button 10</button>
<button class="button is-link">Button 11</button>
<button class="button is-warning">Button 12</button>
<button class="button is-success">Button 13</button>
<button class="button is-link">Button 14</button>
<button class="button is-warning">Button 15</button>
<button class="button is-success">Button 16</button>
<button class="button is-link">Button 17</button>
<button class="button is-warning">Button 18</button>
<button class="button is-success">Button 19</button>
<button class="button is-link">Button 20</button>
</div>
</div>
</body>
</html>
|
Output:
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Button Lists Alignment</title>
<link rel='stylesheet'
href=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b>Bulma Button Lists Alignment</b>
<div class="container" style="margin-top: 30px;">
<div class="buttons">
<button class="button is-success">Default Align</button>
<button class="button is-link">Default Align</button>
<button class="button is-warning">Default Align</button>
<button class="button is-info">Default Align</button>
</div>
<div class="buttons is-centered">
<button class="button is-success">Center Align</button>
<button class="button is-link">Center Align</button>
<button class="button is-warning">Center Align</button>
<button class="button is-info">Center Align</button>
</div>
<div class="buttons is-right">
<button class="button is-success">Right Align</button>
<button class="button is-link">Right Align</button>
<button class="button is-warning">Right Align</button>
<button class="button is-info">Right Align</button>
</div>
</div>
</body>
</html>
|
Output:
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:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Button Lists</title>
<link rel='stylesheet'
href=
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<b>Bulma Button Lists</b>
<div class="container" style="margin-top: 30px;">
<div class="buttons has-addons is-centered">
<button class="button is-success">Button 1</button>
<button class="button is-link">Button 2</button>
<button class="button is-warning">Button 3</button>
<button class="button is-info">Button 4</button>
</div>
<div class="buttons is-centered">
<button class="button">Button 1</button>
<button class="button is-link is-selected">Button 2</button>
<button class="button">Button 3</button>
<button class="button">Button 4</button>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/elements/button/#list-of-buttons
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...