When we need to group the button on a single line we use an is-grouped modifier in the field container. To group the buttons on a single line we will all the buttons in a div and will give the class is-grouped in the field container.
Bulma Button group class:
- is-grouped: In Bulma is-grouped class is used to group all the buttons on a single line.
Syntax:
<div class="field is-grouped">
<p class="control">
<button class="button">
...
</button>
</p>
</div>
Example 1: In the example below, we used an is-grouped modifier to the div tag.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Button Group</title>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
<body>
<div class="field is-grouped">
<p class="control">
<button class="button is-success">
GFG
</button>
</p>
<p class="control">
<button class="button">
Learn
</button>
</p>
<p class="control">
<button class="button is-success">
Practice
</button>
</p>
</div>
</body>
</html>
Output:
Example 2: In the example below, we used an is-grouped modifier to the div tag.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Button Group</title>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
</head>
<body>
<div class="field is-grouped">
<p class="control">
<button class="button is-success">
GFG
</button>
</p>
<p class="control">
<button class="button is-success">
Tutorials
</button>
</p>
<p class="control">
<button class="button is-success">
Student
</button>
</p>
<p class="control">
<button class="button is-success">
Jobs
</button>
</p>
<p class="control">
<button class="button is-success">
Courses
</button>
</p>
<p class="control">
<button class="button is-success">
Python
</button>
</p>
<p class="control">
<button class="button is-success">
Java
</button>
</p>
</div>
</body>
</html>
Output:
Reference Link: https://bulma.io/documentation/elements/button/#button-group
