1 00:00:03,800 --> 00:00:07,660 We'll continue with the bootstrap grid exercise 2 00:00:07,660 --> 00:00:11,074 that we started out in the previous exercise. 3 00:00:11,074 --> 00:00:14,535 We're going to do a few more things to our index.html 4 00:00:14,535 --> 00:00:18,965 page in order to improve its layout. 5 00:00:18,965 --> 00:00:24,085 We're going to use some custom CSS classes and add some color 6 00:00:24,085 --> 00:00:30,535 to our index.html page using custom CSS classes. 7 00:00:30,535 --> 00:00:39,265 The next thing that I'm going to do is go down to the footer and for this UL here, 8 00:00:39,265 --> 00:00:42,790 you'll notice that this list when you look at 9 00:00:42,790 --> 00:00:49,705 our web page is displayed in the web page using this bulleted list here. 10 00:00:49,705 --> 00:00:52,820 I'm not too happy with this bulleted list, 11 00:00:52,820 --> 00:00:59,350 I want to remove these bullet points and then simply show them as only the links there. 12 00:00:59,350 --> 00:01:03,440 So to do that, I'm going to use another list style called as 13 00:01:03,440 --> 00:01:08,120 list- unstyled and apply that to that UL tag there. 14 00:01:08,120 --> 00:01:09,950 Going back to our web page, 15 00:01:09,950 --> 00:01:12,425 to this UL tag in the footer, 16 00:01:12,425 --> 00:01:21,520 I'm going to apply the class as list-unstyled, 17 00:01:23,230 --> 00:01:32,275 and this would remove those bullets in front of these links there. 18 00:01:32,275 --> 00:01:40,375 Now, let me add a few custom CSS classes to the index.html page. 19 00:01:40,375 --> 00:01:49,635 To do that, we will now create a folder here and name it as the CSS folder here. 20 00:01:49,635 --> 00:01:51,650 Inside the CSS folder, 21 00:01:51,650 --> 00:01:59,670 I'm going to create a new file and name the file as styles.css. 22 00:01:59,670 --> 00:02:02,835 Now, inside the styles.css file, 23 00:02:02,835 --> 00:02:11,685 I can now add some CSS classes in order to style our page. 24 00:02:11,685 --> 00:02:14,600 Let me add some CSS classes here. 25 00:02:14,600 --> 00:02:18,765 So, I would add my first class as row header. 26 00:02:18,765 --> 00:02:21,035 So as the name implies, 27 00:02:21,035 --> 00:02:23,770 this class I am applying to the header. 28 00:02:23,770 --> 00:02:28,865 And then, I would apply the margin as 29 00:02:28,865 --> 00:02:34,330 zero pixel auto and 30 00:02:34,330 --> 00:02:40,150 then padding as zero pixel auto. 31 00:02:40,150 --> 00:02:41,820 So, this is for the row header. 32 00:02:41,820 --> 00:02:46,100 So, I'm going to have zero margin and zero padding for the row header. 33 00:02:46,100 --> 00:02:48,840 And then for the row contents, 34 00:02:48,840 --> 00:02:54,005 so I'm going to add one more CSS class called row-content. 35 00:02:54,005 --> 00:03:01,470 And then for this, I will add margin zero pixel auto, 36 00:03:01,470 --> 00:03:07,815 and then padding have it at 50 pixel, 37 00:03:07,815 --> 00:03:16,170 zero pixel, 50 and zero pixel. 38 00:03:16,170 --> 00:03:21,060 Then I'm going to add a border at 39 00:03:21,060 --> 00:03:28,880 the bottom of my row here. 40 00:03:28,880 --> 00:03:35,195 And then, the border I will give it one pixel and then call it a ridge. 41 00:03:35,195 --> 00:03:45,915 And I will set the minimum height to be 400 pixel for the content here. 42 00:03:45,915 --> 00:03:51,910 That way, my web page will look like more nicer on the screen. 43 00:03:51,910 --> 00:03:55,475 Now this again, you have to try and 44 00:03:55,475 --> 00:03:59,900 see until you are satisfied with the way the page is laid out. 45 00:03:59,900 --> 00:04:03,560 Now also, I'm going to include 46 00:04:03,560 --> 00:04:08,320 one more class called as the footer which as you might have already guessed, 47 00:04:08,320 --> 00:04:13,560 I'm going to apply to the footer and I 48 00:04:13,560 --> 00:04:21,100 will apply a background color to the footer as D1C4E9. 49 00:04:29,140 --> 00:04:32,465 If you ask me how I selected the color, 50 00:04:32,465 --> 00:04:37,630 I just looked up the color and then I was happy with that color. 51 00:04:37,630 --> 00:04:41,460 You can choose any color you want to apply, 52 00:04:41,460 --> 00:04:44,460 but this color seems to be good for me. 53 00:04:44,460 --> 00:04:46,950 So, I added that color. 54 00:04:46,950 --> 00:04:50,110 And for the padding, for the footer, 55 00:04:50,110 --> 00:04:58,890 I would add 20 pixel and zero pixels. 56 00:04:59,100 --> 00:05:06,160 Now, once I have added this styles to my CSS file, 57 00:05:06,160 --> 00:05:10,610 let me apply the CSS file to the index.html page. 58 00:05:10,610 --> 00:05:12,820 I'm going to index.html page. 59 00:05:12,820 --> 00:05:18,950 Obviously, I need to use that CSS file inside my index.html page. 60 00:05:18,950 --> 00:05:22,160 So right after the bootstrap CSS file, 61 00:05:22,160 --> 00:05:32,200 I'm going to do a link and style sheet, 62 00:05:32,970 --> 00:05:39,900 and this is style.css file there. 63 00:05:39,900 --> 00:05:43,525 So that is where my CSS file is stored. 64 00:05:43,525 --> 00:05:49,760 So, I'm going to include that into my index.html page. 65 00:05:49,760 --> 00:05:56,350 Now, I am going to go into the body and apply the classes that I have just created. 66 00:05:56,350 --> 00:05:57,955 So going to the header, 67 00:05:57,955 --> 00:06:03,055 I will apply the row header class to the div in the header. 68 00:06:03,055 --> 00:06:07,475 Then, for the content, 69 00:06:07,475 --> 00:06:14,085 I would apply the row content classes to the rows there. 70 00:06:14,085 --> 00:06:21,180 So, to the three rows in the content, 71 00:06:21,190 --> 00:06:26,690 I apply the row content class and then going down to the footer, 72 00:06:26,690 --> 00:06:28,325 to the footer tag, 73 00:06:28,325 --> 00:06:32,315 I will apply the class footer here, 74 00:06:32,315 --> 00:06:35,240 and then save the changes. 75 00:06:35,240 --> 00:06:38,290 Let's go and have a look at that page now. 76 00:06:38,290 --> 00:06:40,430 Going to your web page, 77 00:06:40,430 --> 00:06:45,970 we're already beginning to see some interesting changes to the web page. 78 00:06:45,970 --> 00:06:48,960 So, you can now see that the content in 79 00:06:48,960 --> 00:06:52,445 the web page has been laid out a bit more cleaner. 80 00:06:52,445 --> 00:06:58,290 That is the border bottom that we added to the row content, 81 00:06:58,290 --> 00:07:03,200 so you can see that there is enough separation between the rows although 82 00:07:03,200 --> 00:07:08,530 the contents of the rows are still positioned towards the top in the rows, 83 00:07:08,530 --> 00:07:11,900 so you have these three rows and then look at the footer, 84 00:07:11,900 --> 00:07:17,740 the footer now has acquired the background color that I applied, 85 00:07:17,740 --> 00:07:26,717 and notice how the links are styled with the list-unstyled on the left side here. 86 00:07:26,717 --> 00:07:33,495 We are not done yet, we got to do a few more changes to the index.html page, 87 00:07:33,495 --> 00:07:39,320 and then come back and have a look at the final result of this exercise. 88 00:07:39,320 --> 00:07:41,485 Going back to your Editor, 89 00:07:41,485 --> 00:07:46,955 I'm going to add a few more CSS classes into my style structure, 90 00:07:46,955 --> 00:07:53,290 it is a file, so I'm going to go in there and then add a class called Jumbotron. 91 00:07:53,290 --> 00:07:59,265 So, you'll see that we have already applied the Jumbotron to our header there. 92 00:07:59,265 --> 00:08:03,145 Now, if I add more properties to this Jumbotron class here, 93 00:08:03,145 --> 00:08:05,875 this will be applied to the Jumbotron, 94 00:08:05,875 --> 00:08:11,535 in addition to the standard default Jumbotron that bootstrap already includes. 95 00:08:11,535 --> 00:08:13,835 I'm going to add in a few more things, 96 00:08:13,835 --> 00:08:17,355 I'm going to add in a padding of 97 00:08:17,735 --> 00:08:28,765 70 and 30 pixel on its surroundings, 98 00:08:29,095 --> 00:08:38,515 and then a margin of zero pixel all around, 99 00:08:38,515 --> 00:08:51,685 and I will set the background of this to 9575CD. 100 00:08:51,685 --> 00:09:01,065 This is somewhat of a darker purple color which seems to go very well on the Jumbotron. 101 00:09:01,065 --> 00:09:03,430 Again, by trial and error, 102 00:09:03,430 --> 00:09:04,975 I selected that color, 103 00:09:04,975 --> 00:09:11,735 and also the text color as floral white. 104 00:09:13,205 --> 00:09:15,305 So for the Jumbotron, 105 00:09:15,305 --> 00:09:18,615 we are going to apply those classes, and also, 106 00:09:18,615 --> 00:09:24,765 I'm going to apply one more class to the address class. 107 00:09:24,765 --> 00:09:26,520 We have an address in the footer, 108 00:09:26,520 --> 00:09:34,685 so I'm going to change the font size of that to 80 percent, 109 00:09:34,685 --> 00:09:38,935 a slightly smaller font than the normal font, 110 00:09:38,955 --> 00:09:43,455 and the margin, I will give it a zero pixel, 111 00:09:43,455 --> 00:09:50,285 and the color, I'm going to use zero F, 112 00:09:50,285 --> 00:09:52,350 zero F, zero F, 113 00:09:52,350 --> 00:09:54,730 and then save the changes. 114 00:09:54,730 --> 00:09:58,730 So couple more CSS classes added, 115 00:09:58,730 --> 00:10:01,530 switching back to index.html. 116 00:10:01,530 --> 00:10:03,475 What I'm going to do now, 117 00:10:03,475 --> 00:10:07,775 is to go to the content rows and then 118 00:10:07,775 --> 00:10:11,990 I'm going to try and position this content in the middle, 119 00:10:11,990 --> 00:10:14,605 vertically in that row. 120 00:10:14,605 --> 00:10:17,930 This is where I'm going to take the help of 121 00:10:17,930 --> 00:10:23,050 the vertical alignment that bootstrap grid supports through the Flexbox support. 122 00:10:23,050 --> 00:10:31,395 To do that, I would say align-items-center, 123 00:10:31,495 --> 00:10:38,620 so this is the other class that I need to add, align-items-center. 124 00:10:38,620 --> 00:10:45,475 And I'm going to add that to the remaining two rows also, 125 00:10:45,475 --> 00:10:51,735 align-items-center to the second and the third row, 126 00:10:53,185 --> 00:11:01,965 and that should do a vertical justification of the content of the rows. 127 00:11:01,965 --> 00:11:03,880 We'll see the result in a minute. 128 00:11:03,880 --> 00:11:06,230 Going down to the footer. 129 00:11:06,230 --> 00:11:09,835 In the footer, you see that we have used 130 00:11:09,835 --> 00:11:13,825 the column auto for this copyright content there. 131 00:11:13,825 --> 00:11:18,265 Now, I'm going to position this right in the middle horizontally 132 00:11:18,265 --> 00:11:24,160 using that justify-content-center class, 133 00:11:24,160 --> 00:11:32,755 so there is a justify content and a few other classes there. 134 00:11:32,755 --> 00:11:35,890 I'm going to use to justify-content-center class for that. 135 00:11:35,890 --> 00:11:44,605 That will essentially position that column in the center of the row there. 136 00:11:44,725 --> 00:11:48,560 That applied to that, and then, 137 00:11:48,560 --> 00:11:51,415 one little change that I'm going to do, 138 00:11:51,415 --> 00:11:53,370 is to this inner div there, 139 00:11:53,370 --> 00:12:01,665 I'm going to apply a class as text-center to that, 140 00:12:01,665 --> 00:12:06,435 so that these links are centered on the screen. 141 00:12:06,435 --> 00:12:11,340 With these changes, let's go and take a look at the web page, 142 00:12:11,340 --> 00:12:14,135 at end of this exercise. 143 00:12:14,135 --> 00:12:16,120 Going to our web page, 144 00:12:16,120 --> 00:12:20,020 our web page is already starting to look even better now, 145 00:12:20,020 --> 00:12:25,885 so you can now see that the Jumbotron is now styled with a new background color, 146 00:12:25,885 --> 00:12:28,955 which is a little dark purple there, 147 00:12:28,955 --> 00:12:34,980 and the lettering is now in floral white color, 148 00:12:34,980 --> 00:12:37,190 little bit indented there, 149 00:12:37,190 --> 00:12:44,345 then you can now see that the content in the content rows are now vertically centered, 150 00:12:44,345 --> 00:12:47,500 for the three content rows. 151 00:12:47,500 --> 00:12:54,645 This is the use of the align-items-center that we applied to the rows there. 152 00:12:54,645 --> 00:12:56,525 Then going to the footer, 153 00:12:56,525 --> 00:13:03,380 you can now see that this copyright is now justified to the center of the screen. 154 00:13:03,380 --> 00:13:08,155 Look at how the links here have been centered. 155 00:13:08,155 --> 00:13:15,985 I realized that I want to also position this vertically centering to this particular row, 156 00:13:15,985 --> 00:13:19,855 so let's go and apply one more class to move this to 157 00:13:19,855 --> 00:13:24,540 the center of this particular row vertically. 158 00:13:24,540 --> 00:13:27,100 So to do that, going back to index. 159 00:13:27,100 --> 00:13:34,115 html, in the footer for that particular column which contains those, 160 00:13:34,115 --> 00:13:41,795 I will apply the class as align-self-center. 161 00:13:41,795 --> 00:13:48,485 This should be applied to the div which uses the column class. 162 00:13:48,485 --> 00:13:54,185 With this, that particular content will be aligned to the center of the row. 163 00:13:54,185 --> 00:13:56,570 The remaining content will still remain at the top. 164 00:13:56,570 --> 00:13:59,575 Let's take a final look at the footer. 165 00:13:59,575 --> 00:14:01,705 Going to the footer in our web page, 166 00:14:01,705 --> 00:14:06,345 you can now see how this has been positioned vertically in the center. 167 00:14:06,345 --> 00:14:10,715 These two pieces of content are still aligned to the top of the row, 168 00:14:10,715 --> 00:14:15,215 that is fine because that looks okay on in there, 169 00:14:15,215 --> 00:14:21,340 but this one I have dragged it down vertically to the center of this particular row. 170 00:14:21,340 --> 00:14:25,545 With this, we complete this exercise. 171 00:14:25,545 --> 00:14:30,005 In this exercise, we saw the use of custom CSS classes, 172 00:14:30,005 --> 00:14:35,125 and also used some of the classes for 173 00:14:35,125 --> 00:14:41,660 justifying the content horizontally and vertically in our rows. 174 00:14:41,660 --> 00:14:45,695 This is a good time for you to do a good comment with the message, 175 00:14:45,695 --> 00:14:48,735 Bootstrap grid, part two.