1 00:00:00,300 --> 00:00:03,530 Bootstrap allows for many different buttons dials. 2 00:00:03,540 --> 00:00:08,500 The first row in this example provides an illustration of what the different button classes look like. 3 00:00:09,740 --> 00:00:14,420 In our HMO code on the left side we can see how each button was created. 4 00:00:16,680 --> 00:00:21,860 We start with the open button tag and this is in reference to the first button here. 5 00:00:21,960 --> 00:00:22,830 The default button 6 00:00:28,870 --> 00:00:37,230 after the button tag we specify the type attribute which in this case is button and next. 7 00:00:37,230 --> 00:00:39,720 This is the important part for the styling. 8 00:00:39,720 --> 00:00:49,330 We specify the two classes button Beatty and end button default button default gives this type of button 9 00:00:49,330 --> 00:00:52,830 styling. 10 00:00:52,850 --> 00:00:57,800 Next we just specified the label for the button which in this case is default. 11 00:00:57,890 --> 00:01:05,000 And lastly we close the button element tag for the remaining buttons in this block of code. 12 00:01:05,060 --> 00:01:11,540 All we've done is updated the Button class and button label so you can see here for the second button 13 00:01:11,870 --> 00:01:18,070 we've changed one of the classes to button primary and updated the label as well. 14 00:01:18,080 --> 00:01:23,970 Two primary if you wanted something different displayed on the button you could simply go and change 15 00:01:23,970 --> 00:01:24,510 the label 16 00:01:27,200 --> 00:01:28,680 or save the file. 17 00:01:29,770 --> 00:01:33,030 And once a refresh we can see different text displayed in the button. 18 00:01:34,870 --> 00:01:44,320 The third button uses the button success class followed by button in full warning danger and button 19 00:01:44,320 --> 00:01:51,850 link button link creates this type of an effect it's a text link which is underlined on mouse over 20 00:01:57,960 --> 00:01:58,650 bootstrap. 21 00:01:58,670 --> 00:02:00,270 Oh also allows us to apply. 22 00:02:00,270 --> 00:02:12,500 Button classes two elements such as input elements and submit buttons we can see an example here. 23 00:02:12,630 --> 00:02:16,200 The first item is a link element. 24 00:02:16,200 --> 00:02:23,130 You can see that with the Open a tag enclosing a tag. 25 00:02:23,130 --> 00:02:31,410 In this case the element the link element has been assigned the class button and button info. 26 00:02:31,410 --> 00:02:39,130 We also need to specify the button or sorry the role which in this case equals button and when we do 27 00:02:39,130 --> 00:02:39,840 that. 28 00:02:40,000 --> 00:02:47,250 This is the type of button that's created and so you can see that we've converted a link element into 29 00:02:47,310 --> 00:02:51,130 a button format. 30 00:02:51,150 --> 00:02:56,140 Next we have the input button so you can see the open input tag. 31 00:02:56,140 --> 00:03:03,630 We specify the type button type and we've also specified the class which in this case two classes button 32 00:03:03,720 --> 00:03:08,430 and button primary and so you can see we've applied. 33 00:03:08,430 --> 00:03:18,560 This is the type of style that's created to an input when you apply these two classes. 34 00:03:18,570 --> 00:03:27,170 Next we have a submit button or sorry submit input and we've applied to classes again button and button 35 00:03:27,170 --> 00:03:30,480 warning and this is the different. 36 00:03:30,490 --> 00:03:39,960 This is the type of input style we get from those two classes now keep in mind that the value is just 37 00:03:39,960 --> 00:03:43,550 the tax that's outplayed on the button itself. 38 00:03:43,610 --> 00:03:51,400 So if we wanted to change that we could not receiving or just refresh then you can see that the label 39 00:03:51,400 --> 00:03:51,850 changes 40 00:03:57,430 --> 00:04:02,840 we can change the size of the buttons by adding the button size class. 41 00:04:02,880 --> 00:04:13,170 Here we have our first button said to button large so Beatty and dash LG and that produces the the largest 42 00:04:13,170 --> 00:04:20,730 button size followed by button medium small and extra small and you can see the output on the right 43 00:04:20,730 --> 00:04:27,720 hand side here. 44 00:04:28,130 --> 00:04:34,920 We can create block level buttons using Booth a block level button spans the entire width of the parent 45 00:04:34,980 --> 00:04:36,050 element. 46 00:04:36,090 --> 00:04:41,750 So in this case the pyramid the parent element is a fixed with container. 47 00:04:41,850 --> 00:04:45,210 So there you can see the parent class equals container 48 00:04:49,470 --> 00:04:57,080 K and to create a block level button you just need to apply the button Dash. 49 00:04:57,090 --> 00:05:03,270 BLOCK class so here we have button button primary. 50 00:05:03,470 --> 00:05:05,170 And the third class button. 51 00:05:05,180 --> 00:05:08,060 BLOCK And so that's what that looks like there. 52 00:05:09,950 --> 00:05:12,860 You'll notice that the other block level buttons are larger or sorry. 53 00:05:12,860 --> 00:05:15,440 The second one is larger and the other one is smaller. 54 00:05:15,500 --> 00:05:18,350 And that's because we've specified the size. 55 00:05:18,410 --> 00:05:27,960 So on the second block level button we've just created another class which is button large 56 00:05:30,680 --> 00:05:39,920 in the primary the button primary is as we explored previously is the bluish button button. 57 00:05:39,940 --> 00:05:43,090 Default is the clear button. 58 00:05:43,450 --> 00:05:48,100 And so you can see all the different classes we've applied here. 59 00:05:48,100 --> 00:05:56,780 Button button primary button large and button block and that's produced this large block level button 60 00:05:56,820 --> 00:05:57,060 here 61 00:06:01,620 --> 00:06:04,500 these two block level buttons were created in the same way. 62 00:06:04,530 --> 00:06:10,200 All we've done is changed from button large to button small as you can see here 63 00:06:17,620 --> 00:06:24,340 we can create disabled or active buttons so you can see here that this button is unthinkable meaning 64 00:06:24,340 --> 00:06:26,810 it's disabled and on the left. 65 00:06:26,860 --> 00:06:37,160 This button is active so on the left hand side in the cold we can see that we've applied the Button 66 00:06:37,160 --> 00:06:41,000 class button primary and also active. 67 00:06:41,000 --> 00:06:45,620 So the active class gives it a little bit more of a highlight. 68 00:06:45,950 --> 00:06:55,870 It's it's like the darker blue than the primary class which is over here now disabled. 69 00:06:55,870 --> 00:07:04,800 You can see in the second button we've created the different classes Button Button primary and disabled. 70 00:07:04,800 --> 00:07:08,430 So by adding the disabled class this is the effect you get.