Bulma Button group
Last Updated :
20 Jan, 2022
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Button Group</title>
<link rel='stylesheet'
href=
</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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Button Group</title>
<link rel='stylesheet'
href=
</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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...