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.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>GFG</title>
<link
rel="stylesheet"
href=
/>
<script src=
</script>
</head>
<body>
<div class="content container has-text-centered">
<h1 class="title has-text-success">GeekforGeeks</h1>
<h1 class="subtitle">Bulma Button Group with addons</h1>
<div class="field has-addons">
<p class="control">
<button class="button">
<span class="icon is-small">
<i class="fas fa-list"></i>
</span>
<span>Option</span>
</button>
</p>
<p class="control">
<button class="button">
<span class="icon is-small">
<i class="fas fa-trash"></i>
</span>
<span>Delete</span>
</button>
</p>
<p class="control">
<button class="button">
<span class="icon is-small">
<i class="fas fa-copy"></i>
</span>
<span>Copy</span>
</button>
</p>
</div>
<div class="field has-addons">
<p class="control">
<button class="button is-info">
<span class="icon is-small">
<i class="fab fa-facebook"></i>
</span>
<span>Facebook</span>
</button>
</p>
<p class="control">
<button class="button is-dark">
<span class="icon is-small">
<i class="fab fa-github"></i>
</span>
<span>GitHub</span>
</button>
</p>
<p class="control">
<button class="button is-danger">
<span class="icon is-small">
<i class="fab fa-instagram"></i>
</span>
<span>Instagram</span>
</button>
</p>
<p class="control">
<button class="button">
<span class="icon is-small">
<i class="fab fa-twitter"></i>
</span>
<span>Twitter</span>
</button>
</p>
</div>
</div>
</body>
</html>
|
Output:
Bulma Button Group with Addons
Example 2: This example illustrates the colored Bulma button group with addons.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GFG</title>
<link
rel="stylesheet"
href=
/>
<script src=
</script>
</head>
<body>
<div class="content container has-text-centered">
<h1 class="title has-text-success">GeekforGeeks</h1>
<h1 class="subtitle">Bulma Button Group with addons</h1>
<div class="field has-addons">
<p class="control">
<button class="button">
<span class="icon is-small">
<i class="fas fa-thumbs-up"></i>
</span>
</button>
</p>
<p class="control">
<button class="button">
<span class="icon is-small">
<i class="fas fa-thumbs-down"></i>
</span>
</button>
</p>
<p class="control">
<button class="button">
<span class="icon is-small">
<i class="fas fa-thumbtack"></i>
</span>
</button>
</p>
</div>
<div class="field has-addons">
<p class="control">
<button class="button">
<span class="icon is-small">
<i class="fas fa-bold"></i>
</span>
<span>Bold</span>
</button>
</p>
<p class="control">
<button class="button">
<span class="icon is-small">
<i class="fas fa-italic"></i>
</span>
<span>Italic</span>
</button>
</p>
<p class="control">
<button class="button ">
<span class="icon is-small">
<i class="fas fa-underline"></i>
</span>
<span>Underline</span>
</button>
</p>
</div>
</div>
</body>
</html>
|
Output:
Bulma Button Group with Addons
Reference: https://bulma.io/documentation/elements/button/#button-group-with-addons