Lesson 11: Button Groups in Bootstrap 5

What is the Btn-group in Bootstrap 5? How to create or use Buttons in Bootstrap 5? Let's find out together with TipsMake.com!

 

Bootstrap has long been known as a popular and useful HTML and CSS framework for web development. Here you can easily find many beautiful templates for any project topic. And Button is one of them.

Whether you're developing web or application applications, buttons are a crucial component that you can't ignore, and absolutely need. They are the points or tools that allow users to navigate to their favorite pages.

If you frequently read news, watch movies, or listen to music, you're probably familiar with buttons. They often appear at the bottom of a page as navigation buttons or as page numbers for a specific section, or at the top of a page as a Play button to open music, and much more. All of these are forms of buttons. That's right, you can design buttons in many different ways. Below are some things you need to know about Button Groups in Bootstrap 5.

 

Button Grouping in Bootstrap allows you to group consecutive buttons into a single line. This is very useful if you want to organize buttons that are at the same level, on the same line, and with the same formatting. The grouped buttons will have the following formatting:

Horizontal node group

To create the button cluster as shown above, we will use the tag combined with the class .btn-group, with the complete code as follows:

 Ví dụ Bootstrap - QuanTriMang.com 

Button group in Bootstrap

The .btn-group class creates a group of buttons:

 QuanTriMang META.vn Download 

 

Tip : Instead of applying a uniform size to all buttons in the group, use a class .btn-group-lgfor the large button group or .btn-group-smfor the small button group:

 Ví dụ Bootstrap - QuanTriMang.com 

Button group size in Bootstrap

Add the class `.btn-group-*` for the large/small size button.

Large button:

 QuanTriMang META.vn Download

---

Default button:

 QuanTriMang META.vn Download

---

Small button:

 QuanTriMang META.vn Download 

 

You will see the following result:

Vertical node group

In many cases, you will need to present the buttons vertically instead of in rows as shown above. In this case, instead of using `` .btn-group, you should use the `` class .btn-group-vertical.

 Ví dụ Bootstrap - QuanTriMang.com 

Button group in Bootstrap

The .btn-group-vertical class creates a group of nodes:

 QuanTriMang META.vn Download 

 

The HTML file above will display the following content:

Create multiple groups of buttons side-by-side.

By default, button groups are all "inline," so you can place multiple button groups side-by-side on a single line using the following command:

 Ví dụ Bootstrap - QuanTriMang.com 

Button group in Bootstrap

The default button groups will be formatted "inline," which makes them appear side-by-side when you have multiple groups:

 QuanTriMang META.vn QuanTriMang META.vn 

The result will be as follows:

Nested button groups and dropdown menus

 

Nested button groups are used to create dropdown menus; you can see that a basic nested dropdown menu will look like this:

The HTML code to create the menu shown above is:

 Ví dụ Bootstrap - QuanTriMang.com 

Dropdown Menu Group

Nested button groups to create a dropdown menu:

 QuanTriMang META

1. Medical devices
2. Household appliances

That's just an example; to learn more about each type of dropdown menu, please continue reading the following articles!