1 1 00:00:01,590 --> 00:00:03,700 Hi guys, welcome back, in this video 2 2 00:00:03,700 --> 00:00:08,410 we're going to look at styling our form using Bootstrap. 3 3 00:00:08,410 --> 00:00:10,180 These videos were recorded a bit later 4 4 00:00:10,180 --> 00:00:13,910 than the last section, so whereas before we saw 5 5 00:00:13,910 --> 00:00:17,880 Bootstrap version three, now we're on Bootstrap version four 6 6 00:00:17,880 --> 00:00:20,720 which is the latest version of the library. 7 7 00:00:20,720 --> 00:00:23,130 Most things are exactly the same, 8 8 00:00:23,130 --> 00:00:24,900 but there's just been a couple of changes 9 9 00:00:24,900 --> 00:00:28,290 and a few improvements, so as we go through the course, 10 10 00:00:28,290 --> 00:00:29,990 as we go through this section, 11 11 00:00:29,990 --> 00:00:32,773 we are going to be using Bootstrap four. 12 12 00:00:33,870 --> 00:00:37,010 The website is still getbootstrap.com, 13 13 00:00:37,010 --> 00:00:40,470 and when you go to it, you can see at the top a few links, 14 14 00:00:40,470 --> 00:00:42,670 the documentation is one of them 15 15 00:00:42,670 --> 00:00:46,660 and it is the best place to learn more about Bootstrap. 16 16 00:00:46,660 --> 00:00:49,560 As well as everything we're going to look at in this course, 17 17 00:00:49,560 --> 00:00:52,160 you can always come here to learn more, 18 18 00:00:52,160 --> 00:00:55,330 for example, how to use the different layout capabilities 19 19 00:00:55,330 --> 00:00:58,240 that Bootstrap has, how to use the components 20 20 00:00:58,240 --> 00:01:01,330 that it's got a lot of, and all that sort of stuff. 21 21 00:01:01,330 --> 00:01:03,670 Definitely recommended that you come here 22 22 00:01:04,547 --> 00:01:06,190 to learn more about Bootstrap. 23 23 00:01:06,190 --> 00:01:07,590 The first thing to do though is to 24 24 00:01:07,590 --> 00:01:10,380 go over to the getting started page. 25 25 00:01:10,380 --> 00:01:14,530 And we're going to use this link here in our page 26 26 00:01:14,530 --> 00:01:19,530 in order to include the Bootstrap CSS file into our website. 27 27 00:01:21,140 --> 00:01:24,790 What this does is when a user loads our page, 28 28 00:01:24,790 --> 00:01:27,130 we're going to give them an HTML file 29 29 00:01:27,130 --> 00:01:30,410 and in that HTML file, we're going to put this link. 30 30 00:01:30,410 --> 00:01:32,990 When the browser encounters this link, 31 31 00:01:32,990 --> 00:01:37,690 it then goes over to this address here, the href, 32 32 00:01:37,690 --> 00:01:40,716 and it loads whatever file is linked 33 33 00:01:40,716 --> 00:01:43,020 into the user's browser as well. 34 34 00:01:43,020 --> 00:01:44,610 So that the styling that is present 35 35 00:01:44,610 --> 00:01:47,883 in this Bootstrap file is also applied to our site. 36 36 00:01:49,040 --> 00:01:50,890 So what this is gonna do is it's gonna load this 37 37 00:01:50,890 --> 00:01:55,890 bootstrap.min.css file into our page so that we can use it. 38 38 00:01:56,300 --> 00:02:00,740 Once you do that, all of the CSS capabilities of Bootstrap 39 39 00:02:00,740 --> 00:02:03,090 become enabled in your application 40 40 00:02:03,090 --> 00:02:05,890 so that you can use the components and things like that. 41 41 00:02:07,020 --> 00:02:08,920 Let's do that first of all, we're gonna copy 42 42 00:02:08,920 --> 00:02:13,010 this thing entirely, then go over to our PyCharm project 43 43 00:02:13,010 --> 00:02:18,010 and open base.html, and here, just above the title 44 44 00:02:18,130 --> 00:02:21,300 or indeed anywhere else inside the <head> tag, 45 45 00:02:21,300 --> 00:02:25,493 we're gonna put this link to the Bootstrap file. 46 46 00:02:26,770 --> 00:02:28,870 Alright, now that we have that Bootstrap file, 47 47 00:02:28,870 --> 00:02:30,470 that means that we can apply all of 48 48 00:02:30,470 --> 00:02:34,543 the Bootstrap styling to our items. 49 49 00:02:35,550 --> 00:02:38,070 Something very important as part of Bootstrap 50 50 00:02:38,070 --> 00:02:41,660 is of course to know what Bootstrap can do for you. 51 51 00:02:41,660 --> 00:02:45,670 And that is where the documentation comes into play. 52 52 00:02:45,670 --> 00:02:49,530 By looking at the various sections of the documentation, 53 53 00:02:49,530 --> 00:02:52,223 you can see what you want to use. 54 54 00:02:53,638 --> 00:02:55,580 In this case, we're gonna go over to the components part 55 55 00:02:55,580 --> 00:02:58,280 and then over to forms to look at 56 56 00:02:58,280 --> 00:03:00,480 what sort of thing Bootstrap is going to do. 57 57 00:03:01,810 --> 00:03:06,430 So, the first thing is that we've got our form down here, 58 58 00:03:06,430 --> 00:03:09,350 this is obviously an example but our form looks 59 59 00:03:09,350 --> 00:03:12,500 fairly similar to the one shown in this example. 60 60 00:03:12,500 --> 00:03:15,800 Of course, we have crafted it specifically for the course 61 61 00:03:15,800 --> 00:03:18,570 so that it matches this thing, 62 62 00:03:18,570 --> 00:03:21,230 and you can see that there are a couple of things 63 63 00:03:21,230 --> 00:03:25,160 that our form is different from this example form. 64 64 00:03:25,160 --> 00:03:27,610 And one of those things are these classes 65 65 00:03:27,610 --> 00:03:30,770 that are given to the various parts of the form. 66 66 00:03:30,770 --> 00:03:32,850 For example, this div inside the form 67 67 00:03:32,850 --> 00:03:34,920 that contains a label and the input, 68 68 00:03:34,920 --> 00:03:39,783 and optionally, the help, has a class of form-group. 69 69 00:03:40,950 --> 00:03:44,233 Similarly, the inputs have a class of form-control, 70 70 00:03:45,160 --> 00:03:48,713 and the small help text has a class of form-text. 71 71 00:03:49,710 --> 00:03:52,640 It also has a class of text-muted, 72 72 00:03:52,640 --> 00:03:55,420 because that gives the text a slightly lighter colour 73 73 00:03:55,420 --> 00:03:57,940 so that it appears less important. 74 74 00:03:57,940 --> 00:03:59,700 As well as this simple example, 75 75 00:03:59,700 --> 00:04:02,400 the documentation gives you a lot of information 76 76 00:04:02,400 --> 00:04:05,610 about everything that Bootstrap can do for you. 77 77 00:04:05,610 --> 00:04:09,750 How to style single fields, how to style drop-downs, 78 78 00:04:09,750 --> 00:04:11,170 how to style multiple selects, 79 79 00:04:11,170 --> 00:04:14,743 text areas, and a lot more stuff. 80 80 00:04:16,240 --> 00:04:19,040 On the right here you can see everything 81 81 00:04:19,040 --> 00:04:21,750 related to forms that Bootstrap can do, 82 82 00:04:21,750 --> 00:04:26,120 from styling to layout to disabled forms, 83 83 00:04:26,120 --> 00:04:29,313 validation, and custom forms, and a lot more. 84 84 00:04:30,451 --> 00:04:33,290 If the form that you wanna develop 85 85 00:04:33,290 --> 00:04:36,360 isn't covered by the simple examples that are at the top, 86 86 00:04:36,360 --> 00:04:38,220 do read through the documentation 87 87 00:04:38,220 --> 00:04:41,313 in order to see if Bootstrap can do what you want. 88 88 00:04:42,290 --> 00:04:45,790 Often, not always, we will have to make slight changes 89 89 00:04:45,790 --> 00:04:48,510 to the way we see our form in our head 90 90 00:04:48,510 --> 00:04:51,570 in order for Bootstrap to be able to help us with it. 91 91 00:04:51,570 --> 00:04:54,510 Sometimes it can't do exactly what you want, 92 92 00:04:54,510 --> 00:04:56,520 but, with some minor modifications, 93 93 00:04:56,520 --> 00:05:00,094 the form can match what Bootstrap can do. 94 94 00:05:00,094 --> 00:05:02,260 And what I mean by that is not always will Bootstrap 95 95 00:05:02,260 --> 00:05:05,900 give you exactly what you want, but, you can make it work. 96 96 00:05:05,900 --> 00:05:10,120 Alright, let's go over to our form 97 97 00:05:10,120 --> 00:05:12,671 and we're going to add those class names here 98 98 00:05:12,671 --> 00:05:17,300 so that the form will use Bootstrap's styling. 99 99 00:05:17,300 --> 00:05:21,600 Remember, when we include the Bootstrap file into our page, 100 100 00:05:21,600 --> 00:05:24,120 it automatically applies the styling. 101 101 00:05:24,120 --> 00:05:27,360 But, it needs to know what to apply the styling to, 102 102 00:05:27,360 --> 00:05:29,430 and that's what the classes are for. 103 103 00:05:29,430 --> 00:05:34,430 As soon as we give this div the class of form-group, 104 104 00:05:34,449 --> 00:05:38,323 as it is defined here in the documentation, 105 105 00:05:39,230 --> 00:05:42,580 then Bootstrap will know that this should be styled 106 106 00:05:42,580 --> 00:05:45,500 using the relevant styling in Bootstrap. 107 107 00:05:45,500 --> 00:05:47,940 That's just because Bootstrap is going to affect 108 108 00:05:47,940 --> 00:05:50,660 all the divs that have a class of form-group 109 109 00:05:50,660 --> 00:05:53,563 that are inside a form component, which this one is. 110 110 00:05:55,380 --> 00:05:57,840 Similarly, for this input, we're gonna say 111 111 00:05:57,840 --> 00:06:02,623 input type="text", and the class is gonna be form-control. 112 112 00:06:03,480 --> 00:06:06,170 We're going to do that for these other divs as well, 113 113 00:06:06,170 --> 00:06:09,400 because they should also be styled by Bootstrap. 114 114 00:06:09,400 --> 00:06:13,090 And also we're gonna do that for these other inputs. 115 115 00:06:13,090 --> 00:06:17,470 Notice that the order of these type, class, id, 116 116 00:06:17,470 --> 00:06:18,950 name, and placeholder don't matter, 117 117 00:06:18,950 --> 00:06:22,120 but I like to see input type="text" at the beginning, 118 118 00:06:22,120 --> 00:06:25,010 that's why I'm putting the class as the second thing. 119 119 00:06:25,010 --> 00:06:27,350 Just so it's easier to quickly see 120 120 00:06:27,350 --> 00:06:29,603 what type of input this one is. 121 121 00:06:30,630 --> 00:06:33,740 The small text also has a class, 122 122 00:06:33,740 --> 00:06:37,430 and that is this one, form-text and text-muted. 123 123 00:06:37,430 --> 00:06:41,173 So we're gonna copy that and give it here, okay. 124 124 00:06:48,970 --> 00:06:51,710 So just like that, and then we go down to the bottom 125 125 00:06:51,710 --> 00:06:54,610 and look at the button, and notice that it also has 126 126 00:06:54,610 --> 00:06:57,700 a couple of classes that we're gonna give it as well, 127 127 00:06:57,700 --> 00:07:01,710 btn for button, and btn-primary 128 128 00:07:01,710 --> 00:07:03,453 which gives it this blue colour. 129 129 00:07:05,720 --> 00:07:08,080 If you're interested in more button styling, 130 130 00:07:08,080 --> 00:07:09,970 you can go to the button component 131 131 00:07:09,970 --> 00:07:11,830 and there you have all these different colours 132 132 00:07:11,830 --> 00:07:14,540 and different styles that you can apply. 133 133 00:07:14,540 --> 00:07:16,380 Now that we've got this, let's run our app 134 134 00:07:16,380 --> 00:07:17,730 and see what it looks like. 135 135 00:07:20,870 --> 00:07:24,060 So we've loaded that app and make sure that 136 136 00:07:24,060 --> 00:07:27,270 if you have been working with the app a lot, 137 137 00:07:27,270 --> 00:07:29,880 that you do right click and inspect, 138 138 00:07:29,880 --> 00:07:32,870 go to network and make sure to disable cache 139 139 00:07:32,870 --> 00:07:36,050 as if you keep the cache enabled, potentially you're 140 140 00:07:36,050 --> 00:07:38,960 going to see that the styling is not applied. 141 141 00:07:38,960 --> 00:07:41,093 I'm just going to zoom out a little bit 142 142 00:07:41,093 --> 00:07:42,680 so that it matches what you see on your screen, 143 143 00:07:42,680 --> 00:07:45,030 and it'll be something more or less like this. 144 144 00:07:45,030 --> 00:07:46,610 So what we can see here is that we've 145 145 00:07:46,610 --> 00:07:51,610 put a form that now looks much nicer than it used to. 146 146 00:07:51,670 --> 00:07:53,220 Now we've got a nice title at the top, 147 147 00:07:53,220 --> 00:07:54,700 notice that the font has changed 148 148 00:07:54,700 --> 00:07:56,260 because Bootstrap will automatically 149 149 00:07:56,260 --> 00:07:59,090 use a nicer font than the default, 150 150 00:07:59,090 --> 00:08:02,630 it will have a series of fonts that it will use 151 151 00:08:02,630 --> 00:08:04,670 whenever you load Bootstrap into your application, 152 152 00:08:04,670 --> 00:08:06,070 and you can change that if you want 153 153 00:08:06,070 --> 00:08:08,170 or you can use them, which is what we've done here, 154 154 00:08:08,170 --> 00:08:10,470 we've just left them as the default. 155 155 00:08:10,470 --> 00:08:13,580 And then we've got the labels and fields, 156 156 00:08:13,580 --> 00:08:15,820 and even this small text here, 157 157 00:08:15,820 --> 00:08:17,863 and this create button on the left. 158 158 00:08:19,330 --> 00:08:22,170 Notice that Bootstrap does a bunch of things 159 159 00:08:22,170 --> 00:08:25,040 that you may or may not like, such as make sure 160 160 00:08:25,040 --> 00:08:29,670 that these fields occupy the entire width of their parent. 161 161 00:08:29,670 --> 00:08:33,340 And, you know, it adds the spacing inside of the button 162 162 00:08:33,340 --> 00:08:36,810 so that it occupies all of this blue space. 163 163 00:08:36,810 --> 00:08:38,930 These things are just part of Bootstrap, 164 164 00:08:38,930 --> 00:08:42,030 and you can change them using CSS, 165 165 00:08:42,030 --> 00:08:45,000 but I think that Bootstrap looks quite nice 166 166 00:08:45,000 --> 00:08:47,150 and it is a perfect thing to use 167 167 00:08:47,150 --> 00:08:49,180 when you want to get your app developed quickly 168 168 00:08:49,180 --> 00:08:51,003 and you wanna use it quickly. 169 169 00:08:51,840 --> 00:08:55,090 So my advice would be, if you want to develop something 170 170 00:08:55,090 --> 00:08:56,970 that you'll wanna use immediately, 171 171 00:08:56,970 --> 00:08:58,410 and you'll wanna develop it quickly 172 172 00:08:58,410 --> 00:09:00,850 so that your users can take advantage of the product 173 173 00:09:00,850 --> 00:09:03,823 you're developing, Bootstrap is a good option. 174 174 00:09:04,860 --> 00:09:07,499 Adding extra CSS that you code yourself 175 175 00:09:07,499 --> 00:09:10,410 to make extra changes and make Bootstrap 176 176 00:09:10,410 --> 00:09:13,290 look a bit more personalised is always an option, 177 177 00:09:13,290 --> 00:09:15,700 but I would do it later, once your application 178 178 00:09:15,700 --> 00:09:18,810 is ready and is being used by users. 179 179 00:09:18,810 --> 00:09:20,420 That's everything for this video, 180 180 00:09:20,420 --> 00:09:23,290 I just wanted to give you a quick primer on Bootstrap 181 181 00:09:23,290 --> 00:09:26,660 and show you the new styling, and show you how easy it is. 182 182 00:09:26,660 --> 00:09:28,130 All we have to do is take our form 183 183 00:09:28,130 --> 00:09:29,700 and add a couple classes to it, 184 184 00:09:29,700 --> 00:09:31,823 and now our form looks pretty great. 185 185 00:09:32,700 --> 00:09:34,250 Thanks for joining me in this video, 186 186 00:09:34,250 --> 00:09:35,700 I'll see you on the next one.