What is the Btn-group in Bootstrap 5? How to create or use Buttons in Bootstrap 5? Lets find out together with TipsMake.com!
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:
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:
Default button:
Small button:
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 `.btn-group-vertical.
Ví dụ Bootstrap - QuanTriMang.com Button group in Bootstrap
The .btn-group-vertical class creates a group of nodes:
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:
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:
That's just an example; to learn more about each type of dropdown menu, please continue reading the following articles!