How To Use Bootstrap 4 Button Group [With Examples]
In this tutorial, we have covered Bootstrap Button Group with contextual classes, button toolbar, button group sizes, vertical button groups, outline button group:
Please note that we have used Bootstrap version 4 in all examples.
=> Check ALL Bootstrap Tutorials Here
Bootstrap Button Group
The Bootstrap Button group is similar to buttons* but it combines two or more buttons to create a group of buttons.
*We already discussed buttons in our previous tutorial. You may refer to the Bootstrap 4 Buttons tutorial first for a better understanding of button groups.
Given below are the three classes that are used to create a Bootstrap 4 button group (colored button group).
- The .btn class
- The .btn-group class
- The .btn-* contextual class
Wrap two or more buttons (with the .btn class) in a <div> element with the .btn-group class to create a button group.
The below table summarizes the classes that are used to create Bootstrap 4 Button Groups.
ClassUsage
The .btn-group classThis class is also used to create a button group.
The .btn-toolbar classThis class is used to create a button toolbar.
The .btn-group-sm classThis class is used to create a small button group.
The .btn-group-lg classThis class is used to create a large button group.
The .btn-group-vertical classThis class is used to create a vertical button group.
Bootstrap Button Group With Contextual Classes
The contextual classes we have used for colored buttons can be used to create colored button groups as well.
Example:
The below programming code shows an example of button groups with contextual classes.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="btn-group"> <button type="button" class="btn btn-primary">Primary Item 1</button> <button type="button" class="btn btn-primary">Primary Item 2</button> <button type="button" class="btn btn-primary">Primary Item 3</button> </div> <br> <div class="btn-group mt-3"> <button type="button" class="btn btn-secondary">Secondary Item 1</button> <button type="button" class="btn btn-secondary">Secondary Item 2</button> <button type="button" class="btn btn-secondary">Secondary Item 3</button> </div> <br> <div class="btn-group mt-3"> <button type="button" class="btn btn-success">Success Item 1</button> <button type="button" class="btn btn-success">Success Item 2</button> <button type="button" class="btn btn-success">Success Item 3</button> </div> <br> <div class="btn-group mt-3"> <button type="button" class="btn btn-danger">Danger Item 1</button> <button type="button" class="btn btn-danger">Danger Item 2</button> <button type="button" class="btn btn-danger">Danger Item 3</button> </div> <br> <div class="btn-group mt-3"> <button type="button" class="btn btn-warning">Warning Item 1</button> <button type="button" class="btn btn-warning">Warning Item 2</button> <button type="button" class="btn btn-warning">Warning Item 3</button> </div> <br> <div class="btn-group mt-3"> <button type="button" class="btn btn-info">Info Item 1</button> <button type="button" class="btn btn-info">Info Item 2</button> <button type="button" class="btn btn-info">Info Item 3</button> </div> <br> <div class="btn-group mt-3"> <button type="button" class="btn btn-light">Light Item 1</button> <button type="button" class="btn btn-light">Light Item 2</button> <button type="button" class="btn btn-light">Light Item 3</button> </div> <br> <div class="btn-group mt-3"> <button type="button" class="btn btn-dark">Dark Item 1</button> <button type="button" class="btn btn-dark">Dark Item 2</button> <button type="button" class="btn btn-dark">Dark Item 3</button> </div> </div> </body> </html>
Output
Button Toolbar
The button toolbar combines two or more button groups into a button toolbar. Wrap two or more button groups in an <div> element with the .btn-toolbar class to create a button toolbar. Furthermore, you can combine input groups with button groups.
Example:
The programming code shows two examples of button toolbars.
- Example 1: A button toolbar with two-button groups.
- Example 2: A button toolbar with a button group and an input group.
You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <p>Example 1:</p> <div class="btn-toolbar mb-3"> <div class="btn-group mr-2"> <button type="button" class="btn btn-primary">Blue</button> <button type="button" class="btn btn-primary">Blue</button> <button type="button" class="btn btn-primary">Blue</button> </div> <div class="btn-group mr-2"> <button type="button" class="btn btn-danger">Red</button> <button type="button" class="btn btn-warning">Yellow</button> <button type="button" class="btn btn-success">Green</button> </div> </div> <p>Example 2:</p> <div class="btn-toolbar" role="toolbar"> <div class="btn-group mr-2" role="group"> <button type="button" class="btn btn-primary">A</button> <button type="button" class="btn btn-info">B</button> <button type="button" class="btn btn-success">C</button> <button type="button" class="btn btn-warning">D</button> <button type="button" class="btn btn-danger">E</button> </div> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text" id="btnGroup">@</div> </div> <input type="text" class="form-control" placeholder="Type your email..."> </div> </div> </div> </body> </html>
Output:
Button Group Sizes
Similar to buttons, there are three sizes of button groups as well.
They are:
- Small button groups
- Default size button groups
- Large button groups
Example:
The below programming code shows an example of a small button group, a default size button group, and a large button group.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="btn-group btn-group-sm mb-3"> <button type="button" class="btn btn-danger">Small</button> <button type="button" class="btn btn-warning">Small</button> <button type="button" class="btn btn-success">Small</button> </div> <br> <div class="btn-group mb-3"> <button type="button" class="btn btn-danger">Default</button> <button type="button" class="btn btn-warning">Default</button> <button type="button" class="btn btn-success">Default</button> </div> <br> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-danger">Large</button> <button type="button" class="btn btn-warning">Large</button> <button type="button" class="btn btn-success">Large</button> </div> </div> </body> </html>
Output:
Vertical Button Groups
Add the .btn-group-vertical class instead of the .btn-group class to the <div> element to create a vertical button group.
Example:
The below programming code shows an example of a vertical button group.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="btn-group-vertical mb-3"> <button type="button" class="btn btn-danger">Item 1</button> <button type="button" class="btn btn-warning">Item 2</button> <button type="button" class="btn btn-success">Item 3</button> </div> </div> </body> </html>
Output:
Outline Button Groups
You can create an outline button group if you want a button group without a background-color.
Add the .btn-outline -* contextual class to the <button> elements instead of the .btn-* contextual class to create an outline button group. The .btn-outline -* contextual classes we have used for outline buttons can be used to create outline button groups as well.
Example:
The below programming code shows an example of Outline button groups with contextual classes.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="btn-group mb-3"> <button type="button" class="btn btn-outline-primary">Left</button> <button type="button" class="btn btn-outline-primary">Middle</button> <button type="button" class="btn btn-outline-primary">Right</button> </div> <br> <div class="btn-group mb-3"> <button type="button" class="btn btn-outline-secondary">Left</button> <button type="button" class="btn btn-outline-secondary">Middle</button> <button type="button" class="btn btn-outline-secondary">Right</button> </div> <br> <div class="btn-group mb-3"> <button type="button" class="btn btn-outline-success">Left</button> <button type="button" class="btn btn-outline-success">Middle</button> <button type="button" class="btn btn-outline-success">Right</button> </div> <br> <div class="btn-group mb-3"> <button type="button" class="btn btn-outline-danger">Left</button> <button type="button" class="btn btn-outline-danger">Middle</button> <button type="button" class="btn btn-outline-danger">Right</button> </div> <br> <div class="btn-group mb-3"> <button type="button" class="btn btn-outline-warning">Left</button> <button type="button" class="btn btn-outline-warning">Middle</button> <button type="button" class="btn btn-outline-warning">Right</button> </div> <br> <div class="btn-group mb-3"> <button type="button" class="btn btn-outline-info">Left</button> <button type="button" class="btn btn-outline-info">Middle</button> <button type="button" class="btn btn-outline-info">Right</button> </div> <br> <div class="btn-group mb-3"> <button type="button" class="btn btn-outline-light text-dark">Left</button> <button type="button" class="btn btn-outline-light text-dark">Middle</button> <button type="button" class="btn btn-outline-light text-dark">Right</button> </div> <br> <div class="btn-group"> <button type="button" class="btn btn-outline-dark">Left</button> <button type="button" class="btn btn-outline-dark">Middle</button> <button type="button" class="btn btn-outline-dark">Right</button> </div> </div> </body> </html>
Output:
Frequently Asked Questions
In this section, we will take a look at some of the frequently asked questions about Bootstrap 4 button groups.
Q #1) What is the difference between a Button and a Button group?
Answer: A Button is an individual component while a Button group is a combination of buttons.
Q #2) Name the three main classes that are used to create a Button group (colored button group)?
Answer: The three main classes that are used to create a button group are the btn-group class, the .btn class and one of the contextual classes (.btn-*).
Q #3) Which Contextual classes are used for Button groups?
Answer: There are eight contextual classes used for button groups. They are the .btn-primary class, the .btn-secondary class, the .btn-success class, the .btn-danger class, the .btn-warning class, the .btn-info class, the .btn-light class and the .btn-dark class.
Q #4) What are the different sizes of the Button group?
Answer: There are three sizes of button groups i.e. Small button group size, Default button group size, and Large button group size.
Q #5) How to create a Small Button group?
Answer: Add the .btn-group-sm class to the relevant <div> element to create a Small button group.
Q #6) How create a Large Button group?
Answer: Add the .btn-group-lg class to the relevant <div> element to create a Large button group.
Q #7) Which class is used to create a Button Toolbar?
Answer: The .btn-toolbar class is used to create a Button toolbar.
Q #8) Which class is used to create a Vertical Button group?
Answer: The .btn-group-vertical class is used to create a Vertical Button group.
Q #9) Which Contextual classes are used for Outline Button groups?
Answer: There are eight contextual classes that are used for Outline button groups. They are the .btn-outline-primary class, the .btn-outline-secondary class, the .btn-outline-success class, the .btn-outline-danger class, the .btn-outline-warning class, the .btn-outline-info class, the .btn-outline-light class and the .btn-outline-dark class.
Conclusion
Bootstrap has eight contextual classes for adding colors to the Button groups and Outline button groups. Furthermore, it provides facilities to control the other styling features such as the size of the button group, etc.
In our upcoming tutorial, we will discuss the Bootstrap 4 Collapse, Jumbotron, Tooltips, Popovers, Spinners, and Progress bars in detail.
=> Visit Here To Learn Bootstrap From Scratch
