1 00:00:00,000 --> 00:00:04,797 [MUSIC] 2 00:00:04,797 --> 00:00:11,490 In this exercise, we're going to look at Bootstrap's support for buttons and forms. 3 00:00:11,490 --> 00:00:17,293 So we're going to include a few buttons and button group in our webpage. 4 00:00:17,293 --> 00:00:24,190 And we also look at designing forms and styling the forms using Bootstrap classes. 5 00:00:25,780 --> 00:00:31,080 To get you started, go to the instructions page and 6 00:00:31,080 --> 00:00:36,900 download the contactus.html.zip file that we have provided there. 7 00:00:36,900 --> 00:00:39,798 So right click on that, and 8 00:00:39,798 --> 00:00:44,969 then save this link into your conFusion folder. 9 00:00:48,512 --> 00:00:49,568 As, 10 00:00:54,264 --> 00:01:01,598 contactus.html.zip file. 11 00:01:01,598 --> 00:01:08,580 And then once the zip file is downloaded, unzip the file to get contactus.html page. 12 00:01:09,740 --> 00:01:11,580 Then you can delete the zip file. 13 00:01:13,440 --> 00:01:18,764 Once you've unzipped the file and get contactus.html page, 14 00:01:18,764 --> 00:01:23,084 you would notice that when you load this page in your 15 00:01:23,084 --> 00:01:28,107 browser using localhost:3000/ contactus.html, 16 00:01:28,107 --> 00:01:34,748 then you would see that this page is already pre-formated with some content. 17 00:01:34,748 --> 00:01:38,550 So you can notice that you already have the navigation bar there. 18 00:01:38,550 --> 00:01:42,846 We have the jumbotron already formatted for us. 19 00:01:42,846 --> 00:01:48,061 And you would notice that I have the breadcrumbs and 20 00:01:48,061 --> 00:01:52,190 the contact us heading here formatted. 21 00:01:52,190 --> 00:01:57,730 Then you will see some additional information, the address here. 22 00:01:57,730 --> 00:02:04,180 And also, you will notice that the footer is already formated. 23 00:02:04,180 --> 00:02:06,580 But you will notice two things here, 24 00:02:06,580 --> 00:02:11,820 you'll notice that there is a line here that says button groups go here and 25 00:02:11,820 --> 00:02:15,678 then one more line here that says form goes here. 26 00:02:15,678 --> 00:02:20,280 So we're going to replace these two with a button group and a form. 27 00:02:20,280 --> 00:02:25,380 And along the way, learn Bootstrap's support for buttons and forms. 28 00:02:25,380 --> 00:02:31,015 Before we proceed forward, now that we have three pages in our website, 29 00:02:31,015 --> 00:02:34,585 it is a good idea for us to link them up together, 30 00:02:34,585 --> 00:02:39,525 both in the navigation bar and in the links in the footer. 31 00:02:39,525 --> 00:02:45,165 Let's modify those two so that we can navigate between these three pages easily. 32 00:02:45,165 --> 00:02:52,008 So going to the contactus.html page, you will notice that in the navigation bar, 33 00:02:52,008 --> 00:02:56,816 I already have the links to index.html set up correctly. 34 00:02:58,908 --> 00:03:03,568 And you would notice that at the bottom 35 00:03:03,568 --> 00:03:08,450 here you have the contact link here. 36 00:03:08,450 --> 00:03:15,550 But the link corresponding to the about has not been configured properly. 37 00:03:15,550 --> 00:03:19,905 So go to this link here and then update that to 38 00:03:19,905 --> 00:03:24,430 aboutus.html. 39 00:03:24,430 --> 00:03:27,788 The contact us link can be left alone as such. 40 00:03:27,788 --> 00:03:31,050 And then save the changes. 41 00:03:31,050 --> 00:03:35,070 Now similarly, go to the footer of this page. 42 00:03:35,070 --> 00:03:40,975 And you will notice that in the footer we have these three links here. 43 00:03:40,975 --> 00:03:45,215 And this may be a good point to replace the links 44 00:03:45,215 --> 00:03:48,015 with the links to the corresponding pages. 45 00:03:48,015 --> 00:03:54,342 So I'll say, index.html, aboutus.html, 46 00:03:54,342 --> 00:03:59,665 and, contactus.html. 47 00:03:59,665 --> 00:04:01,325 And save the changes. 48 00:04:01,325 --> 00:04:08,117 Similarly, go to index.html, and then in index.html also, 49 00:04:08,117 --> 00:04:12,280 the contact us link has not been set up. 50 00:04:12,280 --> 00:04:18,640 So let's update that to contactus.html. 51 00:04:18,640 --> 00:04:21,900 And then similarly, update the links in the footer. 52 00:04:23,050 --> 00:04:27,258 Also go to aboutus.html and then fix up the links even there. 53 00:04:27,258 --> 00:04:32,540 So in the aboutus.html also, in the header I'm going to fix up the link. 54 00:04:37,461 --> 00:04:41,690 And also in the footer of aboutus.html. 55 00:04:41,690 --> 00:04:44,050 So now when you go to your website, 56 00:04:44,050 --> 00:04:49,290 you'll be able to navigate back to your home page, to your about page. 57 00:04:49,290 --> 00:04:52,950 And from the about page, you can even go back to the contacts page. 58 00:04:52,950 --> 00:04:57,780 So all the links between the three pages in the corresponding headers, and 59 00:04:57,780 --> 00:05:01,480 also the footers, here should be setup. 60 00:05:01,480 --> 00:05:06,500 So that if you click on any one of these will take you to the appropriate page. 61 00:05:08,190 --> 00:05:12,660 Now is the time to start working on the buttons that we're going to 62 00:05:12,660 --> 00:05:17,040 include in our contactus.html page. 63 00:05:17,040 --> 00:05:23,060 So what I will do is I will replace this line with the code for 64 00:05:23,060 --> 00:05:25,580 the button and the button group and 65 00:05:25,580 --> 00:05:30,465 then after that, we'll come back to explain how this whole thing works. 66 00:05:30,465 --> 00:05:34,650 Opening contactus.html in our editor, 67 00:05:34,650 --> 00:05:40,402 we'll locate the place where this statement, button group goes here, exists. 68 00:05:40,402 --> 00:05:44,230 And then I'm going to replace that with the code corresponding to 69 00:05:44,230 --> 00:05:46,920 that button group first. 70 00:05:46,920 --> 00:05:51,600 And then I'll come back to explain how this code works. 71 00:05:51,600 --> 00:05:56,570 So let's save the changes, and then take a look at what 72 00:05:56,570 --> 00:06:00,920 this button group looks like in our browser. 73 00:06:02,550 --> 00:06:07,224 Going to your browser, you can now see that in our 74 00:06:07,224 --> 00:06:12,310 webpage the button group has been created. 75 00:06:12,310 --> 00:06:15,040 So you can see that there are three buttons here, Call, 76 00:06:15,040 --> 00:06:17,540 Skype and Email buttons. 77 00:06:17,540 --> 00:06:21,990 Now, all these three are joined together into one single bar or 78 00:06:21,990 --> 00:06:26,800 button bar or what is in Bootstrap terms called a button group. 79 00:06:26,800 --> 00:06:31,350 So let's look at how we go about constructing something like this in 80 00:06:31,350 --> 00:06:32,390 Bootstrap code. 81 00:06:33,530 --> 00:06:41,530 So here I have both the browser window and my code open side by side. 82 00:06:41,530 --> 00:06:44,990 So let's have a look at how we create this button code. 83 00:06:44,990 --> 00:06:48,536 Taking a look at the code, you notice that 84 00:06:48,536 --> 00:06:53,745 the buttons are included inside a div here. 85 00:06:53,745 --> 00:06:57,060 To the div, we apply the class, btn-group. 86 00:06:57,060 --> 00:07:02,255 So, if you have a group of buttons that you want to join together and 87 00:07:02,255 --> 00:07:06,225 present as a group of buttons, as a bar of buttons, 88 00:07:06,225 --> 00:07:10,990 then you would use a div with the button group class and 89 00:07:10,990 --> 00:07:14,540 the role as group here to that div. 90 00:07:14,540 --> 00:07:18,332 Now inside that, you will notice that I am using the ,a, 91 00:07:18,332 --> 00:07:20,550 tag to define the three buttons. 92 00:07:20,550 --> 00:07:23,590 So let's look at how we define the three button. 93 00:07:23,590 --> 00:07:26,430 Let's look at how we define the Call button. 94 00:07:26,430 --> 00:07:30,030 So this particular line defines the Call button. 95 00:07:30,030 --> 00:07:33,718 So I say ,a, role is equal to button. 96 00:07:33,718 --> 00:07:38,375 So this ,a, tag here, 97 00:07:38,375 --> 00:07:42,565 I am using it as a button here. 98 00:07:42,565 --> 00:07:44,955 So that's why I specify the role as a button. 99 00:07:44,955 --> 00:07:46,545 So this is important. 100 00:07:46,545 --> 00:07:49,591 And then look at the classes that I am applying to this. 101 00:07:49,591 --> 00:07:54,926 So the first one is btn class. 102 00:07:54,926 --> 00:07:59,880 The btn class is the Bootstrap's button class. 103 00:07:59,880 --> 00:08:03,720 So it will display that as a classic Bootstrap button. 104 00:08:03,720 --> 00:08:07,300 The second part say is btn-primary. 105 00:08:07,300 --> 00:08:10,940 So, this is what defines the color of the button here. 106 00:08:10,940 --> 00:08:15,910 So, in this case this button color is blue. 107 00:08:15,910 --> 00:08:18,750 And so, this is the primary color in Bootstrap. 108 00:08:18,750 --> 00:08:20,670 So btn-primary. 109 00:08:20,670 --> 00:08:25,510 And then after that, look at the use of the href here. 110 00:08:25,510 --> 00:08:30,850 So, since this is an A tag, I can use an href attribute in that A tag. 111 00:08:30,850 --> 00:08:33,610 So, the href attribute points to the telephone number. 112 00:08:35,110 --> 00:08:40,940 And then following that you notice that I am using a font icon here for the phone. 113 00:08:40,940 --> 00:08:47,560 That's why I have i class fa fa-phone and then after the word call. 114 00:08:47,560 --> 00:08:53,170 So, this is what enables to construct this 115 00:08:53,170 --> 00:08:58,550 blue button, that is included in this button bar here. 116 00:08:58,550 --> 00:09:04,150 Similarly, the next one, you notice that this also says role button. 117 00:09:04,150 --> 00:09:07,795 And then as you go through, you see that btn-info. 118 00:09:07,795 --> 00:09:12,235 Btn-info gives it a color of a light blue in color. 119 00:09:12,235 --> 00:09:18,665 So, by default btn-info refers to a light-blue colored button here. 120 00:09:18,665 --> 00:09:22,975 And then, you can see that I have the Skype defined here. 121 00:09:22,975 --> 00:09:28,172 And then the third one which, is a green button there with email. 122 00:09:28,172 --> 00:09:34,542 Notice that I specify letters a role = button class = btn btn-success. 123 00:09:34,542 --> 00:09:38,132 So, when you say btn-success, that will be a green button here. 124 00:09:38,132 --> 00:09:44,102 So, you have some colors that are already defined in Bootstrap. 125 00:09:44,102 --> 00:09:48,322 Primary refers to blue in for the first, light blue success refers to 126 00:09:49,390 --> 00:09:54,250 the green color, then you have warning which would be a pale yellow color, and 127 00:09:54,250 --> 00:09:56,150 then danger, which is a red color. 128 00:09:56,150 --> 00:09:59,763 So, these are default colors that were set up in Bootstrap. 129 00:10:01,712 --> 00:10:06,602 And then the href setup, with the mailto here, and 130 00:10:06,602 --> 00:10:10,140 then following that, you have the. 131 00:10:11,972 --> 00:10:16,030 Font as icon here and then the email there. 132 00:10:16,030 --> 00:10:21,410 So this three e tags, which are currently acting as buttons, 133 00:10:21,410 --> 00:10:26,780 are enclosed in side those div, which acts as the btn-group. 134 00:10:26,780 --> 00:10:32,100 So, that's how we display a group of buttons in Bootstrap. 135 00:10:32,100 --> 00:10:34,470 If you just want single button, 136 00:10:34,470 --> 00:10:37,220 all that you need to do is include only one of these lines there. 137 00:10:38,270 --> 00:10:41,130 So, you could also use the button tag. 138 00:10:41,130 --> 00:10:44,270 If you use the button tag, then you don't need to specify the role, 139 00:10:44,270 --> 00:10:46,730 instead you just say type button. 140 00:10:46,730 --> 00:10:49,700 Because a button could also act as a submit button there. 141 00:10:49,700 --> 00:10:54,140 So later on, in forms we will look at the use of the button tag, 142 00:10:54,140 --> 00:10:57,040 to create a button to be included in our form. 143 00:10:58,600 --> 00:11:03,900 Continuing with the exercise, our next step would be to start, 144 00:11:03,900 --> 00:11:08,790 developing the form that we're going to include in the contactus.html page. 145 00:11:08,790 --> 00:11:13,350 We'll do it step by step, so that in each step we learn a little bit of 146 00:11:13,350 --> 00:11:17,610 how you include some elements into their form. 147 00:11:17,610 --> 00:11:24,480 So, as a beginning, when you go to the contactus.html page, 148 00:11:24,480 --> 00:11:29,430 right there, you'll see this statement called, form goes here. 149 00:11:29,430 --> 00:11:34,771 Now, what I'm going to do is to change this from col-sm 150 00:11:34,771 --> 00:11:39,480 to col-md, so that for 151 00:11:39,480 --> 00:11:44,290 extra small to small screen sizes, my form will be laid out 152 00:11:44,290 --> 00:11:49,352 occupying the entire breadth of the screen, because it uses col-xs-12. 153 00:11:49,352 --> 00:11:53,024 But from medium size screen on wards, 154 00:11:53,024 --> 00:11:57,290 it'll occupy only 9 out the 12 columns. 155 00:11:57,290 --> 00:11:59,600 So, let's start constructing the form. 156 00:11:59,600 --> 00:12:05,470 So, what I'm going to do is, I'm going to replace this, with my first chunk of code. 157 00:12:06,580 --> 00:12:11,300 We're going to include two fields into our form, for 158 00:12:11,300 --> 00:12:14,280 the first name and last name of the user. 159 00:12:14,280 --> 00:12:17,440 Let me add in the code, then we'll look at the result. 160 00:12:17,440 --> 00:12:19,750 And then, we'll come back and examine the code. 161 00:12:19,750 --> 00:12:23,190 So, adding in the code at that point, 162 00:12:23,190 --> 00:12:27,820 as always this code snippets is in the instructions. 163 00:12:27,820 --> 00:12:30,510 So, let me save the changes. 164 00:12:30,510 --> 00:12:35,690 And then we'll go back and look at what this form looks like in the browser. 165 00:12:35,690 --> 00:12:40,250 Taking a look at the form, you'll see that they have now two themes in the form here. 166 00:12:42,060 --> 00:12:46,790 The first one, has a label on the left side saying First Name and 167 00:12:46,790 --> 00:12:49,780 the then you have the input box here. 168 00:12:49,780 --> 00:12:52,800 And then the Last Name, and then an input box here. 169 00:12:52,800 --> 00:12:56,710 Now you notice also that this form is laid out, so 170 00:12:56,710 --> 00:13:00,510 that this part occupies the semi part of the screen, and 171 00:13:00,510 --> 00:13:03,620 the remaining part being occupied by the remaining part of the screen. 172 00:13:03,620 --> 00:13:08,400 You're beginning to wonder, how do we go about doing this? 173 00:13:09,720 --> 00:13:15,095 Does Bootstrap grid help us to decide on these sizes. 174 00:13:15,095 --> 00:13:18,725 That would be a very good question for you to ask yourself. 175 00:13:18,725 --> 00:13:21,695 Let's see the code and understand how it looks like. 176 00:13:21,695 --> 00:13:26,595 Before we do that, let's take a look at the same forms layout, 177 00:13:26,595 --> 00:13:29,595 in the extra small screen size. 178 00:13:29,595 --> 00:13:32,795 So, switching to the extra small screen size. 179 00:13:32,795 --> 00:13:34,425 So we'll go to Galaxy S5. 180 00:13:35,490 --> 00:13:40,060 You notice, how the form is laid out in the extra small screen size. 181 00:13:40,060 --> 00:13:44,304 So, you'll see that the label is on top, and 182 00:13:44,304 --> 00:13:50,590 then the box itself, input box itself is the bottom, similarly for the last name. 183 00:13:50,590 --> 00:13:53,420 So, you notice that Bootstrap. 184 00:13:53,420 --> 00:13:57,500 By the way, it provides those form classes. 185 00:13:57,500 --> 00:14:02,460 Automatically, makes your form responsive, so that when it is laid 186 00:14:02,460 --> 00:14:07,450 out on different screen sizes, the form will be appropriately laid out, 187 00:14:07,450 --> 00:14:12,550 so that it won't get all squashed up on small screen sizes. 188 00:14:13,610 --> 00:14:17,220 But for larger screen sizes, because you have larger real estate, 189 00:14:17,220 --> 00:14:23,480 you are able to stretch the form, to make use of the extra space that you have. 190 00:14:24,830 --> 00:14:31,150 Taking a look at that source code, and the form side by side, obviously 191 00:14:31,150 --> 00:14:36,140 the first thing that you notice, is that your form begins with the form tag here. 192 00:14:36,140 --> 00:14:40,160 So, form and then the closing form, tag here. 193 00:14:40,160 --> 00:14:45,970 So, inside there, you are describing the various parts of your form. 194 00:14:45,970 --> 00:14:49,150 So, let's take a look at how the first name is constructed, 195 00:14:49,150 --> 00:14:54,390 the last name obviously as it looks like should be using a similar approach. 196 00:14:54,390 --> 00:15:01,240 So, in default, what you notice is that, there is a div here. 197 00:15:01,240 --> 00:15:06,480 Div element here, with the closing div here. 198 00:15:06,480 --> 00:15:10,515 So this div element has a class called form-group. 199 00:15:11,920 --> 00:15:15,108 And then followed by a row class. 200 00:15:15,108 --> 00:15:17,080 So the form-group class essentially, 201 00:15:17,080 --> 00:15:22,580 says whatever is inside this div will be treated as a group of elements. 202 00:15:22,580 --> 00:15:26,120 And then they will be laid out accordingly. 203 00:15:26,120 --> 00:15:30,902 And the second part, you see the use of row here. 204 00:15:30,902 --> 00:15:35,740 So, you'd see that the Bootstrap group's row comes into play here. 205 00:15:35,740 --> 00:15:40,610 And so this particular form group, can be laid out 206 00:15:40,610 --> 00:15:45,480 using the row and the column classes that you have from the Bootstrap grid. 207 00:15:45,480 --> 00:15:48,506 So now, if you apply the row to this div, 208 00:15:48,506 --> 00:15:52,956 whatever is inside there, you can use the column classes, 209 00:15:52,956 --> 00:15:58,741 to exactly decide how much of space each of them is going to occupy on the screen. 210 00:15:58,741 --> 00:16:05,390 Now, so that makes it more clearer to, so those form group encloses. 211 00:16:05,390 --> 00:16:06,650 This unit. 212 00:16:06,650 --> 00:16:08,570 We're going to see this repeat over and 213 00:16:08,570 --> 00:16:14,460 over again when we are designing the various elements of the form. 214 00:16:14,460 --> 00:16:20,020 Then, below that, you see this label tag here. 215 00:16:20,020 --> 00:16:25,180 For the label tag, there are certain attributes that have been assigned to it. 216 00:16:25,180 --> 00:16:28,740 So you see that the label tag uses a for firstname. 217 00:16:28,740 --> 00:16:33,650 So this label is for something with the id firstname. 218 00:16:33,650 --> 00:16:37,690 So which is the input box that follows right below that. 219 00:16:37,690 --> 00:16:39,790 We're going to look at that in a short while. 220 00:16:39,790 --> 00:16:46,136 And then look at the classes that are applied to the label class, col-md-2. 221 00:16:46,136 --> 00:16:50,029 So meaning that for medium to extra large screens, 222 00:16:50,029 --> 00:16:56,040 this particular element is going to occupy 2 columns of the space. 223 00:16:56,040 --> 00:16:57,884 And then note the other one. 224 00:16:57,884 --> 00:17:00,764 It says, col-form-label. 225 00:17:00,764 --> 00:17:05,957 So the col-form-label essentially specifies 226 00:17:05,957 --> 00:17:11,780 that this label should be positioned to be aligned with 227 00:17:11,780 --> 00:17:18,270 the other element that forms part of this form group. 228 00:17:18,270 --> 00:17:20,576 So, in this case, the input box. 229 00:17:20,576 --> 00:17:24,508 And so this also means that 230 00:17:24,508 --> 00:17:29,868 the label be lined up in the middle, 231 00:17:29,868 --> 00:17:35,550 horizontally with the input box. 232 00:17:35,550 --> 00:17:39,535 So that is the reason why we use the col-form-label class. 233 00:17:39,535 --> 00:17:43,725 If you don't apply this, then your label will be 234 00:17:43,725 --> 00:17:48,185 aligned to the top of your input box. 235 00:17:48,185 --> 00:17:53,551 Which your form will not look that great on medium to extra large screen sizes. 236 00:17:53,551 --> 00:17:59,727 Now, on the left side, of course, because this browser window is squashed, 237 00:17:59,727 --> 00:18:05,360 so it is showing the view in a small or extra small screen size here. 238 00:18:05,360 --> 00:18:11,650 So that's why you see the label stacking up on top of the input box here. 239 00:18:11,650 --> 00:18:14,560 So this is the label that specify. 240 00:18:14,560 --> 00:18:18,380 So if you have a label that you want to assign to an element, so 241 00:18:18,380 --> 00:18:20,890 that is how you're going to assign the label. 242 00:18:20,890 --> 00:18:25,740 Down below here, you see a div class col-md-10. 243 00:18:25,740 --> 00:18:29,120 So this occupies the remaining 10 of the 12 columns. 244 00:18:29,120 --> 00:18:31,670 So two columns that are occupied by the label. 245 00:18:31,670 --> 00:18:36,070 And the remaining ten columns occupied by this, but is enclosed inside the div. 246 00:18:36,070 --> 00:18:38,230 And inside this div, 247 00:18:38,230 --> 00:18:43,493 you see that there is an input tag element there with the type text. 248 00:18:43,493 --> 00:18:49,734 So which means that this input box accepts text input. 249 00:18:49,734 --> 00:18:52,170 And the class, look at the class here. 250 00:18:52,170 --> 00:18:54,800 It says form-control. 251 00:18:54,800 --> 00:18:57,730 This is important to apply to the input box here. 252 00:18:57,730 --> 00:19:01,301 So form-control, and id firstname. 253 00:19:01,301 --> 00:19:04,550 And the name which is firstname. 254 00:19:04,550 --> 00:19:07,630 Then placeholder First Name. 255 00:19:07,630 --> 00:19:12,840 So the placeholder is what appears inside the box as a placeholder for 256 00:19:12,840 --> 00:19:14,610 the input box. 257 00:19:14,610 --> 00:19:17,470 So all these attributes are assigned. 258 00:19:17,470 --> 00:19:18,690 So more importantly, 259 00:19:18,690 --> 00:19:23,810 note the use of the form-control class being applied to input type. 260 00:19:23,810 --> 00:19:29,960 So this is how you structure these two elements in your form. 261 00:19:29,960 --> 00:19:35,425 For small screen sizes and below, it stacks the two things. 262 00:19:35,425 --> 00:19:37,118 But for medium to extra large, 263 00:19:37,118 --> 00:19:41,500 you saw that it is positioning them horizontally side by side. 264 00:19:41,500 --> 00:19:45,645 The same thing applies to the lastname code also. 265 00:19:45,645 --> 00:19:49,670 It'll be very similar to how the firstname is structured. 266 00:19:49,670 --> 00:19:54,380 So I would like you to spend a little bit of time taking a look at this code also. 267 00:19:54,380 --> 00:19:58,150 So that you see, based upon your understanding of this, 268 00:19:58,150 --> 00:20:00,230 how this is also formatted. 269 00:20:01,550 --> 00:20:08,360 The next kind of formal event that we will add in is an input group element. 270 00:20:08,360 --> 00:20:09,330 Let me add in the code. 271 00:20:09,330 --> 00:20:13,111 We'll look at what the form turns out to be. 272 00:20:13,111 --> 00:20:15,560 And then we'll go back and examine the code. 273 00:20:15,560 --> 00:20:19,542 So right here, after the second div, after the lastname field, 274 00:20:19,542 --> 00:20:24,840 I'm going to include the code for the next element here. 275 00:20:25,880 --> 00:20:28,142 And then let's save the changes. 276 00:20:28,142 --> 00:20:30,466 And then, immediately, 277 00:20:30,466 --> 00:20:36,360 you would see a couple of more things added into your form. 278 00:20:36,360 --> 00:20:38,975 You see a telephone number field added here. 279 00:20:38,975 --> 00:20:42,985 This, from the look of it, you see that this is very similar to that. 280 00:20:42,985 --> 00:20:45,335 So I'm not going to explain the code for this. 281 00:20:45,335 --> 00:20:48,110 This should be very straightforward for you to understand. 282 00:20:48,110 --> 00:20:52,073 And then this email field also should be very straightforward for 283 00:20:52,073 --> 00:20:53,747 you to understand. 284 00:20:53,747 --> 00:20:56,537 Because this looks very similar to the lastname. 285 00:20:56,537 --> 00:21:02,477 Except that for this, the input field, the type will be set to email. 286 00:21:02,477 --> 00:21:06,739 So that the built in form checking capabilities of 287 00:21:06,739 --> 00:21:10,094 your browser automatically kicks in. 288 00:21:10,094 --> 00:21:14,113 So that when you type in something that doesn't look like an email, 289 00:21:14,113 --> 00:21:16,860 then it'll complain appropriately. 290 00:21:16,860 --> 00:21:21,780 So let's examine this particular part of the form here. 291 00:21:21,780 --> 00:21:27,500 Note that in this case, we are adding in left parenthesis and 292 00:21:27,500 --> 00:21:31,430 the right parenthesis to this particular input box. 293 00:21:31,430 --> 00:21:36,570 So how do you add in things into your box like this? 294 00:21:36,570 --> 00:21:41,330 Taking a look at the code here in your editor, 295 00:21:41,330 --> 00:21:45,750 you see that you still have the form-group row which you already understand. 296 00:21:45,750 --> 00:21:50,942 And down below here, you have input type form element id telnum, 297 00:21:50,942 --> 00:21:54,460 and so on, which also should be very clear to you. 298 00:21:54,460 --> 00:21:57,360 So I don't think I need to explain that part to you. 299 00:21:57,360 --> 00:22:04,366 Notice how I am using the Bootstrap's grid column classes to each of these. 300 00:22:04,366 --> 00:22:08,060 So the label is given col-md-2. 301 00:22:08,060 --> 00:22:12,062 And then the telephone number one is given 302 00:22:12,062 --> 00:22:16,880 col-xs-7 col-sm-6 and col-md-7 here. 303 00:22:16,880 --> 00:22:23,100 So that way, the telephone number, this element is properly positioned. 304 00:22:23,100 --> 00:22:27,310 But, in particular, let's pay attention to this part. 305 00:22:27,310 --> 00:22:31,470 So this one here is inside of this div. 306 00:22:32,670 --> 00:22:36,250 So inside this div, notice the class given to it. 307 00:22:36,250 --> 00:22:38,689 The class says input-group. 308 00:22:38,689 --> 00:22:43,587 So essentially meaning that whatever is inside this div will be treated as 309 00:22:43,587 --> 00:22:45,350 a group of elements here. 310 00:22:45,350 --> 00:22:49,030 So that's why the class given is input-group. 311 00:22:49,030 --> 00:22:53,600 Now, for adding in something like this, you will use 312 00:22:53,600 --> 00:22:59,000 a class called as input-group-addon. 313 00:22:59,000 --> 00:23:04,490 And then notice that I am using a div to hold that item. 314 00:23:04,490 --> 00:23:08,200 I can use anything here, but a div comes in handy here. 315 00:23:08,200 --> 00:23:12,980 So I say div class input-group-addon. 316 00:23:12,980 --> 00:23:16,250 And then the closing div type inside, where, 317 00:23:16,250 --> 00:23:18,500 notice that I have the left parenthesis. 318 00:23:18,500 --> 00:23:25,477 So this is what allows you to add in some extra 319 00:23:25,477 --> 00:23:30,963 appendage to your input box here. 320 00:23:30,963 --> 00:23:38,390 Similarly, the one below here is also an input-group-addon right parenthesis. 321 00:23:38,390 --> 00:23:42,350 So that is what adds the other right parenthesis here. 322 00:23:42,350 --> 00:23:46,270 Now, between these two, of course, you have the input type. 323 00:23:46,270 --> 00:23:51,094 The input with the type tel and class form-control, id, name, 324 00:23:51,094 --> 00:23:54,310 placeholder, everything in place here. 325 00:23:54,310 --> 00:23:57,190 So this is nothing but the area code part. 326 00:23:57,190 --> 00:24:02,049 So if you use this input-group together with input-group-addons 327 00:24:02,049 --> 00:24:04,440 like this on either side. 328 00:24:04,440 --> 00:24:10,070 Those things will be added in to your input element like this. 329 00:24:10,070 --> 00:24:15,880 That provides you with a nice way of designing Your form with some added in. 330 00:24:15,880 --> 00:24:20,170 So for example, if you have a field that is accepting 331 00:24:22,450 --> 00:24:27,360 money as the input, you could simply add a dollar sign to the left hand side to 332 00:24:27,360 --> 00:24:33,050 indicate to the user that that is a field that takes currency value at the moment. 333 00:24:33,050 --> 00:24:37,558 Right now in this case, this field takes in an area code. 334 00:24:37,558 --> 00:24:43,330 And if you see how the area codes are written in the United States and 335 00:24:43,330 --> 00:24:47,640 Canada, you know that they are enclosed inside left and right parenthesis. 336 00:24:47,640 --> 00:24:52,680 So, that's what allows me to specify something like that in my form there. 337 00:24:53,900 --> 00:24:56,460 My next set of elements that I'm going to add to my 338 00:24:56,460 --> 00:25:01,530 form are a checkbox and a select. 339 00:25:01,530 --> 00:25:03,460 So, how do we add that? 340 00:25:03,460 --> 00:25:09,014 So, if you are familiar with HTML forms, you understand how select works and 341 00:25:09,014 --> 00:25:13,070 you understand how checkboxes work in HTML forms. 342 00:25:13,070 --> 00:25:15,880 Now, Bootstrap gives you some additional 343 00:25:15,880 --> 00:25:20,080 classes that enable you to format these elements appropriately. 344 00:25:20,080 --> 00:25:21,740 So, let me add in the quote. 345 00:25:23,400 --> 00:25:25,120 Let's save the changes. 346 00:25:25,120 --> 00:25:29,695 Take a look at what this results in the form here. 347 00:25:29,695 --> 00:25:32,480 And then have a look at the code. 348 00:25:32,480 --> 00:25:38,060 So here, you see that I have a checkbox and some message here. 349 00:25:38,060 --> 00:25:45,372 And then this is a selector which allows me to select among a set of choices here. 350 00:25:47,324 --> 00:25:53,309 Now the form as it exists here is what you will see in small and 351 00:25:53,309 --> 00:25:56,080 extra small screen sizes. 352 00:25:56,080 --> 00:25:59,940 Let's take a look at it on a larger screen size. 353 00:25:59,940 --> 00:26:04,740 The same form when laid out on medium to extra large 354 00:26:04,740 --> 00:26:06,760 screen sizes will look like this. 355 00:26:06,760 --> 00:26:11,440 So you can see how the contact telephone number is positioned here, 356 00:26:11,440 --> 00:26:14,500 and email is positioned here. 357 00:26:14,500 --> 00:26:19,825 So notice that these labels are lined 358 00:26:19,825 --> 00:26:26,510 up to a line in the middle with the boxes here. 359 00:26:26,510 --> 00:26:32,640 That is what the col form label class achieves first. 360 00:26:32,640 --> 00:26:36,940 Now, let's concentrate on this that we just added in. 361 00:26:36,940 --> 00:26:40,060 Here, we see that we have a checkbox added in. 362 00:26:40,060 --> 00:26:43,312 And then, a text field here. 363 00:26:43,312 --> 00:26:44,650 So may we contact you? 364 00:26:44,650 --> 00:26:51,370 So, for example, you would expect the user to either check it on and off. 365 00:26:51,370 --> 00:26:53,500 So what is the reason for a checkbox? 366 00:26:53,500 --> 00:26:56,330 Similarly, you could have radio buttons. 367 00:26:56,330 --> 00:27:02,020 Bootstrap supports radio buttons that are available in HTML forms. 368 00:27:02,020 --> 00:27:05,650 And provide some classes for styling them properly. 369 00:27:05,650 --> 00:27:10,850 And then this is of course the selector which allows you to select among choices. 370 00:27:10,850 --> 00:27:13,113 So going back and looking at the code. 371 00:27:13,113 --> 00:27:15,250 Let's see how this are implemented. 372 00:27:16,340 --> 00:27:22,030 Coming back to take a look at the code, you see that this one is again a form 373 00:27:22,030 --> 00:27:28,630 group row div here which encloses two things here. 374 00:27:28,630 --> 00:27:32,859 One is a form-check 375 00:27:32,859 --> 00:27:38,731 col-md-6 offset-md-2. 376 00:27:38,731 --> 00:27:45,120 So this is what encloses a checkbox inside this div element. 377 00:27:45,120 --> 00:27:53,902 And then down below here I have a div class, Col-md-3 offset-md-1. 378 00:27:53,902 --> 00:27:59,979 So notice that here, this says form-check col-md-6 offset-md-2. 379 00:27:59,979 --> 00:28:04,197 The reason why I'm doing an offset-md-2 is I don't have a label. 380 00:28:04,197 --> 00:28:08,166 So I was typically using two columns for the labels. 381 00:28:08,166 --> 00:28:13,160 So since this checkbox should align itself to the right side in the form. 382 00:28:13,160 --> 00:28:16,591 So that's why I used offset-md-2 here. 383 00:28:16,591 --> 00:28:22,654 And then inside here it says label class="form-check-label". 384 00:28:22,654 --> 00:28:28,042 And then it provides input tag 385 00:28:28,042 --> 00:28:32,790 here with type checkbox. 386 00:28:32,790 --> 00:28:35,070 So that's how you create a checkbox. 387 00:28:35,070 --> 00:28:38,300 And then the class, the Bootstrap class that you're going to apply to 388 00:28:38,300 --> 00:28:41,768 your checkbox is form-check-input. 389 00:28:41,768 --> 00:28:49,390 And then the name and the initial value is empty. 390 00:28:49,390 --> 00:28:54,262 And then, this one is the actual label that you see being 391 00:28:54,262 --> 00:28:58,670 applied to that particular checkbox there. 392 00:28:58,670 --> 00:29:04,260 So notice how these two are enclosed inside a label tag here. 393 00:29:04,260 --> 00:29:09,070 So this is how you create a checkbox together with its label and 394 00:29:09,070 --> 00:29:12,980 then position that in your form here. 395 00:29:12,980 --> 00:29:15,840 So this here uses form-check-label. 396 00:29:15,840 --> 00:29:19,880 And then in here, you have to have a checkbox, input type="checkbox", and 397 00:29:19,880 --> 00:29:21,340 then label itself. 398 00:29:21,340 --> 00:29:23,620 So here you see strong, May we contact you? 399 00:29:23,620 --> 00:29:29,770 So that's why it is displayed in bold letters right next to the checkbox here. 400 00:29:29,770 --> 00:29:37,390 Now below in the code, you have a div class col-md-3 offset-md-1. 401 00:29:37,390 --> 00:29:40,760 So this occupies three columns within one column offset. 402 00:29:40,760 --> 00:29:42,980 So the total of four columns here. 403 00:29:42,980 --> 00:29:50,113 So this one is col-md-6 plus 2, so that is eight columns. 404 00:29:50,113 --> 00:29:51,480 So 8 plus 4, 12. 405 00:29:51,480 --> 00:29:55,140 So that takes care of your 12 columns for your grid there. 406 00:29:55,140 --> 00:30:01,740 Now inside this, you see a select applied here. 407 00:30:02,880 --> 00:30:07,320 Now this is the select option that HTML file forms support. 408 00:30:07,320 --> 00:30:09,240 And look at the class applied to this. 409 00:30:09,240 --> 00:30:12,870 It says class="form-control" to the select. 410 00:30:12,870 --> 00:30:15,830 And then you give the options in the select here. 411 00:30:15,830 --> 00:30:18,638 So