1
00:00:00,420 --> 00:00:03,960
We can group a series of buttons together using button groups.

2
00:00:04,110 --> 00:00:07,180
In this example with group three buttons together.

3
00:00:07,350 --> 00:00:12,280
Home company and contact in order to create a button group.

4
00:00:12,280 --> 00:00:15,790
We need to create a div element and give it a button group.

5
00:00:15,790 --> 00:00:20,300
Class inside our container.

6
00:00:20,300 --> 00:00:30,400
We can see here that we have a div element with two classes button group and button group large the

7
00:00:30,680 --> 00:00:33,560
button group large specifies the size of the button

8
00:00:36,590 --> 00:00:41,470
the individual button elements are then nested into the div.

9
00:00:41,780 --> 00:00:49,400
We can see that this group has three buttons each with a button and button primary class is defined

10
00:00:52,040 --> 00:00:59,030
we can size the button group by adding a button group large or button group extra small class to the

11
00:00:59,030 --> 00:01:00,780
div.

12
00:01:01,230 --> 00:01:05,570
This particular group has the button group large class

13
00:01:08,550 --> 00:01:16,560
this group over here is identical except that it has the button group extra small class so you can see

14
00:01:16,560 --> 00:01:21,060
that the first group the button style is larger and in the second it's small

15
00:01:24,540 --> 00:01:28,250
button groups can be laid out horizontally or vertically.

16
00:01:28,260 --> 00:01:35,390
In this example we currently have them horizontally we can change from horizontal to vertical by adding

17
00:01:35,390 --> 00:01:38,840
the word vertical to our button group class

18
00:01:49,840 --> 00:01:55,810
and after saving and refreshing the page you can see that the button group is now vertically styled.