WEBVTT 00:00:07.260 --> 00:00:15.300 In this video we're going to learn how to create style buttons using bootstrap first to create buttons 00:00:15.300 --> 00:00:15.330 . 00:00:15.330 --> 00:00:20.190 There are several ways we can create Ableson using a link. 00:00:20.430 --> 00:00:26.630 Sometimes we want links to act as buttons for example to trigger in page functionality. 00:00:26.730 --> 00:00:29.070 So let's create an example. 00:00:29.190 --> 00:00:31.740 So this creates a link. 00:00:32.700 --> 00:00:39.560 OK so it say that's the link takes us to top of the page. 00:00:41.760 --> 00:00:46.810 So we need to give the link a class of button. 00:00:46.920 --> 00:00:47.440 OK. 00:00:47.790 --> 00:00:54.610 And button link no this link is acting as a button. 00:00:54.630 --> 00:00:55.270 OK. 00:00:55.400 --> 00:01:01.870 So can the ref using the ID of the elements we go into. 00:01:02.400 --> 00:01:07.530 OK so this is the way to make a link act as a button. 00:01:07.530 --> 00:01:08.310 All right. 00:01:08.700 --> 00:01:13.100 Another way is by using straight away the button tag. 00:01:13.620 --> 00:01:14.890 As we have done earlier. 00:01:15.180 --> 00:01:22.190 OK let's have some text there and just dial the button. 00:01:22.200 --> 00:01:24.310 There are a few clusters we can use. 00:01:24.390 --> 00:01:33.570 The first one as we have done in the previous video we can use the Butson class also to style the button 00:01:33.570 --> 00:01:34.010 . 00:01:34.020 --> 00:01:39.930 There are a few classes that come with the pre-build styling. 00:01:39.930 --> 00:01:43.410 So for example we can use Busson defaults. 00:01:43.420 --> 00:01:43.880 OK. 00:01:44.100 --> 00:01:47.970 Another one is Busson primary. 00:01:48.180 --> 00:02:00.640 OK we can change the size of the button using a button small or large and large will be 00:02:04.570 --> 00:02:05.050 right. 00:02:05.070 --> 00:02:18.600 Let's have a slave for Watson for examples of it's like we can also use an input tag 00:02:21.930 --> 00:02:25.220 of type button. 00:02:25.670 --> 00:02:27.760 So it's on syntax 00:02:30.040 --> 00:02:33.750 or we give it a value. 00:02:33.750 --> 00:02:34.740 So the value 00:02:37.800 --> 00:02:42.330 is going to show in the in the inputs. 00:02:42.330 --> 00:02:47.790 So for example we can have a console value for the button. 00:02:48.090 --> 00:02:48.980 OK. 00:02:49.440 --> 00:02:53.830 And this time it's using classes. 00:02:54.060 --> 00:02:57.130 So you can still use the bus in class. 00:02:57.780 --> 00:02:59.430 We can use the 00:03:02.610 --> 00:03:10.180 pre-built classes for styling like custom defaults primary info for example. 00:03:11.130 --> 00:03:18.900 We can change the size of the button using was in large or small or next as OK. 00:03:19.110 --> 00:03:25.250 And you can see he states OK 00:03:28.140 --> 00:03:31.870 if you want the button to be abusive all the time. 00:03:33.600 --> 00:03:38.210 OK we can add the class axes. 00:03:38.490 --> 00:03:40.100 See that's the background color. 00:03:40.140 --> 00:03:43.290 Now is daka. 00:03:43.790 --> 00:03:44.560 OK. 00:03:44.820 --> 00:03:51.180 So it creates one other wasn't using the inputs does change 00:03:54.000 --> 00:04:08.100 these classes so it's go for wasn't X as Liskov or the success of the styling of a volley of submit 00:04:08.110 --> 00:04:11.890 . 00:04:15.660 --> 00:04:19.120 OK. 00:04:20.730 --> 00:04:29.710 We can make the Butson disabled using the class disabled. 00:04:30.010 --> 00:04:33.470 So no it wasn't is disabled. 00:04:33.630 --> 00:04:35.120 We can just click on. 00:04:35.860 --> 00:04:38.010 OK. 00:04:38.990 --> 00:04:39.240 OK. 00:04:39.240 --> 00:04:45.490 Now let's see how to create button groups OK 00:04:53.100 --> 00:05:02.110 so to creates a button group we're going to need a few buttons placed in a diff and we are going to 00:05:02.110 --> 00:05:07.390 give that Steve a special class is going to be Butson group. 00:05:07.620 --> 00:05:08.540 OK. 00:05:09.300 --> 00:05:13.030 So let's create a div. 00:05:15.850 --> 00:05:18.320 Let's have a few buses in there. 00:05:18.430 --> 00:05:28.440 So the best way to create buses is by using the bus and tag for several reasons mainly for cross-browser 00:05:29.350 --> 00:05:30.500 compatibility. 00:05:30.840 --> 00:05:33.500 OK. 00:05:34.810 --> 00:05:39.630 So let's create a button using the button tag. 00:05:40.710 --> 00:05:45.120 OK let's get this one. 00:05:45.970 --> 00:05:47.610 OK let's play some text. 00:05:47.690 --> 00:05:49.950 Ok left the. 00:05:50.530 --> 00:05:51.880 Let's give it a toy. 00:05:52.130 --> 00:05:59.850 But the class of button doesn't default. 00:06:01.350 --> 00:06:02.840 OK. 00:06:03.270 --> 00:06:11.450 Mr. placates does and creates another middle button and writes. 00:06:13.240 --> 00:06:13.940 OK. 00:06:14.310 --> 00:06:26.200 So it creates our button group which will give the ruffing Dave a class Button group and we can see 00:06:26.190 --> 00:06:30.360 how this is styled now. 00:06:30.470 --> 00:06:31.980 All right. 00:06:32.430 --> 00:06:35.540 It's in the break 00:06:37.130 --> 00:06:40.540 . 00:06:43.500 --> 00:06:51.600 And we give it's also a roll of group. 00:06:53.250 --> 00:07:01.170 So that's how we create a button group so he can style each person individually. 00:07:01.600 --> 00:07:02.760 OK. 00:07:04.140 --> 00:07:12.440 We can size resize the buttons by adding a class to the wrapping div. 00:07:12.490 --> 00:07:19.990 So for example if you want to make all the buttons large so you can just use the bus and group large 00:07:20.250 --> 00:07:25.320 class. 00:07:26.130 --> 00:07:27.600 OK. 00:07:27.800 --> 00:07:28.950 All right. 00:07:29.170 --> 00:07:32.880 Now let's move to something else. 00:07:34.000 --> 00:07:34.960 Let me break 00:07:40.330 --> 00:07:51.840 now let's create a Busson toolbar so the toolbar is going to consist of a few groups of buttons. 00:07:51.980 --> 00:07:56.840 OK so let's create a toolbar with three groups of buttons. 00:07:56.920 --> 00:08:02.410 So we're going to do so we're going to place groups of buses like this one 00:08:05.360 --> 00:08:09.160 inside another dip. 00:08:09.520 --> 00:08:10.140 OK. 00:08:10.260 --> 00:08:19.710 So this creates a diff and give it a class of button toolbar. 00:08:20.610 --> 00:08:21.280 OK. 00:08:21.460 --> 00:08:33.060 And the roll is going to be tuba at this place if you bust and groups inside the Steve. 00:08:35.210 --> 00:08:35.780 OK. 00:08:35.860 --> 00:08:41.850 That's the first one. 00:08:41.860 --> 00:08:43.860 Another one and another one. 00:08:44.470 --> 00:08:45.070 OK. 00:08:45.370 --> 00:08:50.310 So you can see how the toolbar a styled we can see each group separately. 00:08:50.520 --> 00:08:54.820 OK. 00:08:58.040 --> 00:08:58.680 OK. 00:08:58.750 --> 00:09:06.290 Finally let's see how to make a certain Busson group take the whole width of the viewport So if got 00:09:06.310 --> 00:09:06.760 a style. 00:09:06.750 --> 00:09:14.690 This wasn't a group so that's the the width of the group is a percent. 00:09:14.860 --> 00:09:22.970 And also we can make the buttons take the same the same width. 00:09:23.080 --> 00:09:27.150 So there is a way to do that by using the. 00:09:28.170 --> 00:09:35.550 OK so first of all let's go to this present day button group. 00:09:35.980 --> 00:09:37.630 So are you going to add a gloss 00:09:41.250 --> 00:09:42.980 button groove justified 00:09:43.000 --> 00:09:50.830 . 00:09:58.380 --> 00:10:00.970 OK. 00:10:03.220 --> 00:10:06.340 Let's take us these close though. 00:10:06.760 --> 00:10:07.600 Was it good 00:10:09.940 --> 00:10:12.500 . 00:10:15.490 --> 00:10:22.060 Now we need to place each button inside a diff. 00:10:22.170 --> 00:10:23.220 OK. 00:10:23.250 --> 00:10:31.660 So first button we need to go inside a div. 00:10:34.360 --> 00:10:35.820 OK. 00:10:36.670 --> 00:10:38.090 Same thing with the second one 00:10:43.760 --> 00:10:50.310 and same thing with it. 00:10:53.760 --> 00:10:55.530 OK. 00:10:55.540 --> 00:11:01.340 Now each of these days is going to take a class. 00:11:01.840 --> 00:11:05.470 OK button group 00:11:06.540 --> 00:11:14.620 . 00:11:19.540 --> 00:11:25.840 Now you can see how the button group now is styled so that it takes the whole width of the viewport 00:11:25.860 --> 00:11:26.720 . 00:11:27.580 --> 00:11:28.500 OK. 00:11:28.510 --> 00:11:34.850 And then also every all the buses are taking the same the same with. 00:11:35.330 --> 00:11:35.570 OK 00:11:37.350 --> 00:11:40.200 . 00:11:40.570 --> 00:11:50.440 Finally let's see how to make a certain Busson group look or appear in a vertical way rather than in 00:11:50.430 --> 00:11:51.920 a horizontal way. 00:11:52.300 --> 00:11:56.550 OK. 00:11:59.540 --> 00:12:03.290 OK so to do that we're going to use a new class. 00:12:03.310 --> 00:12:06.250 It's button group vertical. 00:12:06.610 --> 00:12:09.690 So let's play that to this person for example. 00:12:10.290 --> 00:12:10.740 OK. 00:12:10.800 --> 00:12:16.070 All these you though. 00:12:16.420 --> 00:12:16.730 OK. 00:12:16.780 --> 00:12:22.230 So if you are this close button group 00:12:26.880 --> 00:12:27.450 vertical 00:12:30.900 --> 00:12:40.680 OK you can see how the buzzing group appears now in a vertical way.