1
00:00:01,230 --> 00:00:08,430
Hello, in this video, I am going to show you button groups, so I highly recommend that you watch

2
00:00:08,430 --> 00:00:14,060
the buttons video, which covers the Goldie Button component in boot straps.

3
00:00:14,130 --> 00:00:17,280
This is just basically going to show you how to group them together.

4
00:00:17,430 --> 00:00:21,080
I'm not going to be explaining what buttons are, you know, in terms of the classes, et cetera.

5
00:00:22,040 --> 00:00:34,170
OK, so if we go in and we create a debate and if you're going to have a class BTM, it's going to have

6
00:00:34,170 --> 00:00:34,820
a role.

7
00:00:35,430 --> 00:00:36,950
Give the whole group.

8
00:00:37,740 --> 00:00:40,670
Another area that's known for disability readers

9
00:00:44,120 --> 00:00:46,540
is the same basic example.

10
00:00:46,890 --> 00:00:49,710
Then, you know, you could perform a bit more contextual than that.

11
00:00:50,310 --> 00:01:00,840
You're going to put a button there and I'm going to type not Beaverton, but I'm going to have some

12
00:01:00,840 --> 00:01:01,260
classes.

13
00:01:01,290 --> 00:01:09,090
Now, again, this is just normal button stuff on top of BGN primary for like feme color system.

14
00:01:09,090 --> 00:01:14,490
And I'll put left in the text and I'll just see what I'm doing that in a second.

15
00:01:14,910 --> 00:01:16,020
But you can pull whatever you want.

16
00:01:16,260 --> 00:01:18,360
One of three different ones in this group.

17
00:01:18,480 --> 00:01:25,850
You can put them in your right to free for 20, I guess, and I'm going to put it in the secondary.

18
00:01:26,100 --> 00:01:28,020
You can keep them all the same theme.

19
00:01:28,020 --> 00:01:38,370
I'm just showing that you don't have to put middle and put dange.

20
00:01:40,750 --> 00:01:48,100
Royte refreshed, that is our group, the groups them together, and as you can see, we got a bit of

21
00:01:48,100 --> 00:01:52,900
luck, a border rageous, a bit of a curve on the corners for the one on the left and the right.

22
00:01:52,900 --> 00:01:55,170
But anyone in the middle don't have them.

23
00:01:55,480 --> 00:01:58,080
So they indicate that that they are together.

24
00:01:58,090 --> 00:02:06,790
This could actually go pretty well together to be what you can also do a couple of brake lines just

25
00:02:06,790 --> 00:02:14,110
because I'm not one of these and we don't want them to touch in no particular reason, just for aesthetics.

26
00:02:14,530 --> 00:02:19,830
And you can also put BTM, this group, Destry Vertical element of what's inside.

27
00:02:20,260 --> 00:02:22,460
And this just makes it vertical.

28
00:02:22,870 --> 00:02:24,110
That's nuts, literally.

29
00:02:24,490 --> 00:02:28,840
So the other thing that you can do is actually have a button toolbar.

30
00:02:29,200 --> 00:02:33,070
I clicked Komando before I moved over that.

31
00:02:33,070 --> 00:02:44,410
You can sign a tool both on to copy and paste this and we're going to do it's going to have a class

32
00:02:45,580 --> 00:02:55,810
of beta test ball and the roll of two bar area.

33
00:02:57,900 --> 00:03:07,050
Does label and toolbar here, toolbar with both groups.

34
00:03:09,490 --> 00:03:19,320
OK, so we didn't here we can just have, you know, a group as we normally would be served and or most

35
00:03:19,320 --> 00:03:21,300
of them do make them a primary.

36
00:03:22,140 --> 00:03:25,620
It just looks a little nicer when they're all the same.

37
00:03:25,620 --> 00:03:27,210
But that's not a requirement.

38
00:03:28,070 --> 00:03:31,310
One, two, three.

39
00:03:31,860 --> 00:03:37,050
I'm going to have a total of three groups inside here, and you can have as many as you want.

40
00:03:37,620 --> 00:03:43,320
I mean, the last one is going top to bottom just to show you that they don't all need to have the same

41
00:03:43,320 --> 00:03:51,040
number of buttons in each group, seven and eight and two year mark with that.

42
00:03:51,720 --> 00:03:54,090
So refresh, that's what we get.

43
00:03:54,490 --> 00:03:56,250
I mean, what's the use of that?

44
00:03:56,250 --> 00:03:57,410
And multiply the second?

45
00:03:57,570 --> 00:04:04,770
So as you can see, even though they are together, they are distinguishable because they are different

46
00:04:04,770 --> 00:04:05,160
groups.

47
00:04:05,310 --> 00:04:09,210
The Lesters are a bit of a margin and more than one.

48
00:04:09,840 --> 00:04:14,390
And you experiment with the Todmorden, you want to put your own custom cloth.

49
00:04:14,640 --> 00:04:15,950
That's fine as well.

50
00:04:16,260 --> 00:04:21,510
And even though this really isn't an affect anything, I'd like to put it there, though, just in case

51
00:04:21,510 --> 00:04:23,300
there is another group at the bottom.

52
00:04:25,470 --> 00:04:26,990
So there we go.

53
00:04:27,030 --> 00:04:31,730
It has moved over the way the purpose of having a bottom group like this.

54
00:04:31,950 --> 00:04:40,710
So these three may toggle or be linked to one particular type of feature, the free maybe link to another,

55
00:04:40,710 --> 00:04:42,340
and these two may be linked to another.

56
00:04:42,410 --> 00:04:50,760
OK, let's say the link to pages, for example, and differe to ta ta to let me think of an example

57
00:04:51,880 --> 00:04:52,010
to.

58
00:04:54,760 --> 00:05:03,940
May be in for some sort of video game selection, and the first three are for a particular console,

59
00:05:04,120 --> 00:05:09,240
the for another console and this is for another console, but they're all sort of linked.

60
00:05:09,250 --> 00:05:12,610
Maybe they're the St John, you know, they could be anything.

61
00:05:12,790 --> 00:05:19,270
But the thing is, I'm sure you've seen this sort of stuff on the website and this is how you create

62
00:05:19,270 --> 00:05:19,420
it.

63
00:05:19,750 --> 00:05:25,080
And all of the other extra stuff that you do button groups is on this page.

64
00:05:25,330 --> 00:05:27,190
There will be a link to this in the description.

65
00:05:27,200 --> 00:05:28,930
So feel free to check that out.

66
00:05:29,080 --> 00:05:35,500
And anything that you can do with the regular button which are covered in the bottom video outline you

67
00:05:35,500 --> 00:05:36,130
can do here.

68
00:05:36,400 --> 00:05:40,990
You can, you know, put two balls in there, you can see them.

69
00:05:40,990 --> 00:05:44,190
You can test other features like dropdown, which I'll be covering.

70
00:05:44,410 --> 00:05:46,900
You can do it, have the vertical orientation.

71
00:05:47,080 --> 00:05:48,670
So feel free to check all that out.

72
00:05:48,910 --> 00:05:52,060
As usual, if you have any questions, feel free to me on message.

73
00:05:52,120 --> 00:05:54,670
And I look forward to seeing you in the next video.