Bulma Button group
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 = '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.
HTML
<!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