Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:

Bulma Button group

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:

Bulma Button group

Reference Link: https://bulma.io/documentation/elements/button/#button-group


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!