Hello, in this bootstrap four video, we're going to be looking at button groups. Button groups allow you to group a series of buttons together, it allows you to perform either on a single line or vertically however you want is easy to switch between them. We'll show you both of them. So what we mean by grouping buttons, aka you know, these buttons right here, you can basically group them so they're connected together, keep similar buttons together as essentially what we're going to be showing you plus also, there's other videos in this series that will show you different button types where there is a drop down button. Whether it's a radio button or a checkbox button. Doesn't matter what it is, you can easily substitute one of those buttons for a button.

Within the button groups. We're just going to use simple buttons like we've used so far. But it locks and it's very easy. Just substitute one of the buttons for one of those buttons. So if you just go to your text editor What I'm going to do is add a couple of new lines, just so it's easier to see. First of all, you need to put a div.

And that div is essentially the container for your buttons, aka your button group, need to put a class which is btn dash group. This has a role of group. When I say group, you almost sound like Groot from Guardians of the Galaxy area dash label. No, I don't think I need a label. Now we can admit that and now I'm gonna put some buttons. Like I said, the buttons are essentially what we've already used right here.

So actually, you know what, I'm not even going to put a button here, copy and paste it. So you can actually see, it is literally the same, so I'm gonna use the wrong key to copy that. Copy that one. But many of you aren't really, I'm gonna get this one very up. Then I had this exactly on that look. And then let's get this one's got a small one.

So far, let's paste this inside, save it, go to the browser refresh. There we go. We have a button group first, actually, I'm also going to add some breakpoints at the end. So it's a little easier to see save that refresh. There we go. We have our button group.

And as you can sort of see, the buttons are usually have rounded edges. You can rounded corners, sorry, they usually have rounded corners you can easily do That is to border radius in CSS, if you don't want to just remove it's very simple. But if you put them in a button group, only the one at the end have that border radius, aka, the curve on the corner. Any buttons in the middle don't. So that's really cool. So I'd have to mess around with that just to make it look good.

And as you can see, obviously, small one doesn't look very good. So you will probably want to think about what you're doing when you're doing button groups. So you get buttons that look very nice. I'm just gonna copy a few more in so you can simply see, copy these in really on to the save it, refresh the browser, and as you can see, none of the buttons in the middle have curved corners, only the ones at the edges do. So that's bottom groups. Okay, we're also going to show you how to vertically align them.

And to do that, all you do instead of btn dash group people btn dash group dash, vertical, save it, refresh, and as you can see, they are now aligned vertically and the same principle still applies, aka any buttons in the middle. Don't have, sorry, don't have curved corners, and neither do the corners of the buttons at the edge there are facing in zoid aka these two here, and these two right here with button groups that are vertical, you can easily add other buttons as well wherever it's drop down button radio buttons, the process is exactly the same. So that's button groups. If you have any questions feel free to post them on some are learning Dakota UK for slash question dot php and Well, how so will the community, please rate, comment and subscribe and it'll really help keep the content free. Plus, there'll be another link in the description, which will be the source code from this video.

So check that out. And as usual, thanks for watching, and I hope you have a great day.