1 00:00:00,260 --> 00:00:08,810 Hey, in the previous video, we built this front end here, which has these series of widgets and now 2 00:00:08,810 --> 00:00:12,180 we want to add bootstrap to our project. 3 00:00:12,200 --> 00:00:21,860 Bootstrap is a CSS library, so CSS is a language that adds style to HTML elements. 4 00:00:21,860 --> 00:00:25,570 So we want to work on the index.html code. 5 00:00:25,580 --> 00:00:32,680 The very first thing we want to add here is a link element inside the head elements. 6 00:00:32,680 --> 00:00:37,100 So we have the head tag here and the closing head tag in here. 7 00:00:37,100 --> 00:00:45,740 So we want to add to add the link and inside link here you want to say rel stylesheet. 8 00:00:46,130 --> 00:00:51,230 So we want to specify where the stylesheet is located. 9 00:00:51,230 --> 00:00:56,570 The stylesheet should be a file which contains CSS code. 10 00:00:56,570 --> 00:01:02,060 So you can put that file inside static here. 11 00:01:02,060 --> 00:01:05,660 So create a file and say something like main dot CSS. 12 00:01:05,660 --> 00:01:08,090 But we don't want to do that. 13 00:01:08,090 --> 00:01:14,060 We want to use a remote file which has been written already. 14 00:01:14,060 --> 00:01:25,610 So that is the bootstrap library and that remote file is located in https CDN dot JS deliver. 15 00:01:25,640 --> 00:01:29,000 You can find this link attached in the lecture resources. 16 00:01:29,000 --> 00:01:33,290 So I'm also going to copy that link and paste it here. 17 00:01:33,290 --> 00:01:38,390 So that's a complete link element. 18 00:01:38,390 --> 00:01:40,010 So it should look like this. 19 00:01:40,310 --> 00:01:47,480 So the name of this file is min dot CSS and this file is stored somewhere on a remote server. 20 00:01:47,480 --> 00:01:54,680 If you're curious, you can copy that link and just paste it here, reload and what you'll see is CSS 21 00:01:55,280 --> 00:01:56,120 code. 22 00:01:56,120 --> 00:02:01,680 So all that now that contains classes. 23 00:02:01,680 --> 00:02:08,490 So all that code actually parts of that code can be used in our HTML script. 24 00:02:08,520 --> 00:02:09,360 How? 25 00:02:09,389 --> 00:02:14,370 Well, for example, let's start with the H1 tag here. 26 00:02:14,370 --> 00:02:18,590 So we want to work inside the body tags, right? 27 00:02:18,600 --> 00:02:29,940 So in the H1 tag, you want to add a class attribute which is equal to empty dash for space and B dash 28 00:02:29,940 --> 00:02:31,080 for. 29 00:02:31,080 --> 00:02:38,700 And if you go to the web page and refresh it, you'll see that this changes to something else. 30 00:02:38,700 --> 00:02:49,050 So what we just did is we specified the margin for the top and the bottom of the H1 tag. 31 00:02:49,230 --> 00:02:52,530 And so these are bootstrap classes. 32 00:02:52,530 --> 00:02:57,060 We can apply classes for other objects as well. 33 00:02:57,180 --> 00:03:04,230 One important class is the container class, which applies to the entire content. 34 00:03:04,230 --> 00:03:08,040 So the entire content is inside the body tags. 35 00:03:08,040 --> 00:03:15,390 And to apply that class to all our elements, we need to add here a main div tag. 36 00:03:15,660 --> 00:03:16,470 Div. 37 00:03:16,770 --> 00:03:17,550 Right. 38 00:03:17,550 --> 00:03:23,010 And this should be closed somewhere before the body tag here. 39 00:03:25,710 --> 00:03:26,430 Here. 40 00:03:26,430 --> 00:03:32,080 So you open the just under the opening body tag. 41 00:03:32,100 --> 00:03:37,230 And you close the div just above the closing body tag. 42 00:03:37,230 --> 00:03:37,840 Right. 43 00:03:37,860 --> 00:03:46,530 And then you want to select that div the entire elements up to here. 44 00:03:46,770 --> 00:03:53,430 So everything in between the body tags you want to select and press tab to indent it. 45 00:03:53,460 --> 00:03:59,640 Things will still work if you don't indent it, but indenting makes the code readable more readable. 46 00:03:59,910 --> 00:04:04,230 So now we add here a class is equal to container. 47 00:04:04,350 --> 00:04:06,900 And if you refresh the page. 48 00:04:07,910 --> 00:04:13,200 So you can see that now we have some margin here on the left. 49 00:04:13,250 --> 00:04:17,899 So the app is starting to look better already. 50 00:04:17,930 --> 00:04:20,990 Let's add some more classes, bootstrap classes. 51 00:04:21,560 --> 00:04:28,850 The div under the form we want to add a class is equal to form group. 52 00:04:30,200 --> 00:04:32,060 And be for. 53 00:04:34,260 --> 00:04:36,180 Let's refresh the page. 54 00:04:36,420 --> 00:04:38,760 And so this is what we've got. 55 00:04:38,760 --> 00:04:42,990 So we've got some spacing under the first name, right? 56 00:04:43,470 --> 00:04:50,610 So we just changed the div of the first element, which is the first name, this one here. 57 00:04:50,610 --> 00:04:55,170 So we added some margin at the bottom and means margin bottom. 58 00:04:56,870 --> 00:05:05,490 And this here is also a class, a bootstrap class, which specifies some other styling for group elements. 59 00:05:05,510 --> 00:05:07,880 Let's do the same for the other. 60 00:05:08,720 --> 00:05:10,160 Widgets last name. 61 00:05:10,160 --> 00:05:19,700 So class is equal to form group and before same goes for the other one email. 62 00:05:19,700 --> 00:05:24,710 So I'll just copy this div and just replace this div of the email. 63 00:05:24,830 --> 00:05:26,150 So there we go. 64 00:05:26,180 --> 00:05:30,410 The other div of the date class of the date element. 65 00:05:30,440 --> 00:05:31,340 There we go. 66 00:05:31,340 --> 00:05:38,930 And lastly in here, so the div just above the label current occupation. 67 00:05:38,930 --> 00:05:40,400 So current occupation. 68 00:05:40,400 --> 00:05:41,300 Here is the div. 69 00:05:41,330 --> 00:05:47,810 We want to replace that with this div or you just type in the class, whatever you prefer. 70 00:05:48,170 --> 00:05:51,560 And so yeah, that's it, let's see what we've got. 71 00:05:51,950 --> 00:05:54,350 So we have some spacing between the elements. 72 00:05:54,350 --> 00:05:58,430 So that's looking better now and what's next? 73 00:05:58,730 --> 00:06:08,510 Well, next is you see we have the first name label, the last name label just next to the fields. 74 00:06:08,510 --> 00:06:14,990 We want to put the first name label above its corresponding field, and same for the other labels as 75 00:06:14,990 --> 00:06:15,560 well. 76 00:06:15,590 --> 00:06:25,460 To do that, you should go to each input element, input type, text ID, first name, and in here you 77 00:06:25,460 --> 00:06:28,550 want to add class is equal to. 78 00:06:29,690 --> 00:06:32,660 Form control. 79 00:06:32,840 --> 00:06:33,290 All right. 80 00:06:33,290 --> 00:06:37,100 So let's see the change here for first name. 81 00:06:37,100 --> 00:06:40,730 You see now, first name is on top here, the label. 82 00:06:40,730 --> 00:06:45,290 And then we have this input box, which looks quite better. 83 00:06:45,620 --> 00:06:52,100 So you see the highlighting when I put the cursor here that's different from this one down here. 84 00:06:52,340 --> 00:06:55,430 So that's much better, more visually appealing. 85 00:06:55,640 --> 00:07:06,230 I'll say, Let's do the same for the last name input element class is form control. 86 00:07:06,530 --> 00:07:09,740 Write the email as well. 87 00:07:09,740 --> 00:07:19,580 Class is form control, so make sure you are putting the class inside the input element, not inside 88 00:07:19,580 --> 00:07:20,480 the label. 89 00:07:20,480 --> 00:07:27,680 Same for the date class is form control. 90 00:07:28,730 --> 00:07:33,710 And then we have the radio buttons, which should should take something else. 91 00:07:33,710 --> 00:07:35,860 But let's refresh the page for now. 92 00:07:35,870 --> 00:07:40,430 So there we have first name, last name, email available start date. 93 00:07:40,430 --> 00:07:41,870 So that's looking good. 94 00:07:41,900 --> 00:07:48,020 Now this once here, we can change them to something else, to another style. 95 00:07:48,170 --> 00:07:50,570 We can make them vertical. 96 00:07:50,570 --> 00:07:58,640 You want to go below B or in this div which has the ID occupation. 97 00:07:58,640 --> 00:08:02,090 So this div contains all those radio buttons. 98 00:08:02,090 --> 00:08:11,720 Right now, inside this div we want to add a class of BTN group vertical. 99 00:08:12,750 --> 00:08:14,070 Oh, in quotes. 100 00:08:14,430 --> 00:08:17,310 So BTN dash group dash vertical. 101 00:08:17,370 --> 00:08:24,270 And if you refresh the page now, you will be able to see the buttons stacked vertically. 102 00:08:24,480 --> 00:08:29,790 However, the labels are down here, so let's improve that further. 103 00:08:29,970 --> 00:08:40,530 You want to go to the first input element of the first radio button and you want to add a class of BTN 104 00:08:40,530 --> 00:08:45,510 Dash check space form control. 105 00:08:45,510 --> 00:08:48,690 So two classes, BTN Check and form control. 106 00:08:49,490 --> 00:08:53,420 And you also want to apply a class to the label element. 107 00:08:53,600 --> 00:09:05,840 Class is equal to quotes, BTN, BTN, outline secondary and let's go and refresh the page. 108 00:09:05,840 --> 00:09:07,730 So this is what we've got here. 109 00:09:08,060 --> 00:09:16,430 So that circle was transformed into this toggle button style for this radio button. 110 00:09:16,430 --> 00:09:21,710 And so we have this one and these three, let's make all of them the same. 111 00:09:21,710 --> 00:09:29,990 So I want to copy that class and paste it in the other radio button here, right in the other one. 112 00:09:29,990 --> 00:09:37,070 So I'm working on the input elements first here as well, and then I'll get the class of the label elements. 113 00:09:37,100 --> 00:09:46,970 This class paste it in here, space between the class and the four attributes for this label as well. 114 00:09:46,970 --> 00:09:48,710 And this one as well. 115 00:09:48,750 --> 00:09:50,360 Right. 116 00:09:50,360 --> 00:09:51,650 Let's see. 117 00:09:52,040 --> 00:09:53,390 Yeah, there we go. 118 00:09:53,720 --> 00:09:56,480 So now we can select one of them. 119 00:09:57,580 --> 00:09:59,140 Let me zoom out a bit. 120 00:09:59,760 --> 00:10:01,700 So that is looking good. 121 00:10:01,710 --> 00:10:05,730 And let's finish the submit button as well. 122 00:10:05,730 --> 00:10:08,190 So that is looking good. 123 00:10:08,310 --> 00:10:11,040 Let's also stylize the submit button. 124 00:10:11,040 --> 00:10:15,780 So we locate the button element and we add a class. 125 00:10:17,410 --> 00:10:18,430 BTN. 126 00:10:18,430 --> 00:10:23,470 So BTN is the class that specifies a certain style for buttons. 127 00:10:23,470 --> 00:10:32,740 So basically you're telling the HTML document that this button should be styled according to the BTN 128 00:10:32,740 --> 00:10:33,820 class. 129 00:10:33,940 --> 00:10:42,040 So in the bootstrap CSS file, which I showed you earlier, this class is defined and the attributes 130 00:10:42,040 --> 00:10:45,850 of this class are written in that document. 131 00:10:45,850 --> 00:10:47,290 In that document. 132 00:10:47,290 --> 00:10:54,400 So for example, that the button should have rounded corners and the text should be this far from the 133 00:10:54,400 --> 00:10:59,890 borders of the button and the font family should be this and that. 134 00:11:00,280 --> 00:11:06,550 So when you say this, you are you are basically specifying all those properties, the round corners 135 00:11:06,550 --> 00:11:07,510 and so on. 136 00:11:07,510 --> 00:11:12,370 So instead, instead of writing those manually, you just call this class. 137 00:11:12,370 --> 00:11:19,010 And so that means your button will look good according to the bootstrap standards. 138 00:11:19,010 --> 00:11:24,980 And then you also have things like BTN Dash secondary. 139 00:11:25,010 --> 00:11:29,420 This specifies the color in this case of the button. 140 00:11:29,420 --> 00:11:34,670 So we also use this for this one here you'll see the difference. 141 00:11:34,670 --> 00:11:36,440 So let's go and refresh. 142 00:11:36,440 --> 00:11:45,770 You see now with that secondary option, the button is filled in grey color or but when you say BTN 143 00:11:45,770 --> 00:11:53,120 outline secondary, the button is not filled, but the outline is gray. 144 00:11:53,120 --> 00:11:55,850 So that's the difference here. 145 00:11:55,850 --> 00:12:02,750 I would also like to add and for for this button, so some margin below. 146 00:12:03,620 --> 00:12:04,760 So there we go. 147 00:12:04,760 --> 00:12:09,380 So that the button is not close to the border of the web page. 148 00:12:09,380 --> 00:12:11,270 Now we have some more space down here. 149 00:12:12,550 --> 00:12:13,690 So that's about it. 150 00:12:13,690 --> 00:12:21,730 But we need to add two more elements here, and that is just before the body tags. 151 00:12:21,910 --> 00:12:27,670 So down here, before the body closing tags we want to add. 152 00:12:29,450 --> 00:12:34,610 These two, which you can find attached in the lecture resources. 153 00:12:37,980 --> 00:12:45,420 So this too, will make it possible to show like a notification message here when the user presses the 154 00:12:45,420 --> 00:12:46,500 submit button. 155 00:12:46,920 --> 00:12:55,050 So basically these specify links to JavaScript code which is needed to display that notification message. 156 00:12:55,140 --> 00:12:57,960 So that's the completed script. 157 00:12:57,990 --> 00:13:01,330 I do believe that this looks better now. 158 00:13:01,350 --> 00:13:03,660 I know that it is subjective. 159 00:13:03,690 --> 00:13:09,360 The style is a bit subjective, but we can all agree that this looks better than before. 160 00:13:09,360 --> 00:13:10,800 So thanks a lot for following. 161 00:13:10,800 --> 00:13:11,490 I'll see you later.