1 00:00:03,750 --> 00:00:11,555 Our next exercise looks at ways of displaying content on our web page. 2 00:00:11,555 --> 00:00:17,190 They look at how we can include tables into our web page and how we can 3 00:00:17,190 --> 00:00:23,845 style those tables using Bootstrap's classes for styling tables, 4 00:00:23,845 --> 00:00:27,720 including responsive design of tables. 5 00:00:27,720 --> 00:00:30,860 We'll also look at another versatile component 6 00:00:30,860 --> 00:00:34,290 that is available in Bootstrap called as a card. 7 00:00:34,290 --> 00:00:39,125 A card allows you to display content in millions of ways. 8 00:00:39,125 --> 00:00:44,495 So we'll look at two different ways of using a card to display content. 9 00:00:44,495 --> 00:00:49,275 Later on, we will see the use of cards again and again 10 00:00:49,275 --> 00:00:56,635 for future designs of certain parts of our website. 11 00:00:56,635 --> 00:01:02,520 To get started, open the aboutus.html page. 12 00:01:02,520 --> 00:01:06,035 We are going to insert a table and two cards 13 00:01:06,035 --> 00:01:10,215 into the aboutus.html page to display some card. 14 00:01:10,215 --> 00:01:19,130 First, let's slowly scroll down until after that card for leadership information, 15 00:01:19,130 --> 00:01:23,170 and right there I'm going to introduce another div within 16 00:01:23,170 --> 00:01:28,045 which I'm going to enclose the table here. 17 00:01:28,045 --> 00:01:31,640 So, I will introduce a new row here, 18 00:01:31,640 --> 00:01:38,135 with the class as row row-content. 19 00:01:38,135 --> 00:01:41,185 And inside this div, 20 00:01:41,185 --> 00:01:51,205 we will introduce a column that will host the table here. 21 00:01:51,205 --> 00:01:55,850 So, I will introduce a column, column 12, 22 00:01:55,870 --> 00:02:05,045 column sm-9 and close the div. 23 00:02:05,045 --> 00:02:11,605 And inside div, let me give a heading here 24 00:02:11,605 --> 00:02:21,940 Facts and Figures and close the h2. 25 00:02:23,490 --> 00:02:29,770 Right after that, let me introduce another div, 26 00:02:33,140 --> 00:02:43,320 that the classes column sm and column sm-3 and close off that div there. 27 00:02:43,320 --> 00:02:46,850 Right now we're going to leave the second div empty. 28 00:02:46,850 --> 00:02:53,140 I'm going to fill in the table into the first div here and 29 00:02:53,140 --> 00:03:00,435 then we'll take a quick look at the table after I add in the code for the table. 30 00:03:00,435 --> 00:03:04,525 So here I have listed in the code for the table. 31 00:03:04,525 --> 00:03:12,190 Let's take a quick look at the table and then we'll come back to discuss this code here. 32 00:03:12,190 --> 00:03:20,075 Going to our About page that we already have been working on from earlier, 33 00:03:20,075 --> 00:03:23,080 after the Corporate Leadership section, 34 00:03:23,080 --> 00:03:27,645 you see a new row here introducing the table. 35 00:03:27,645 --> 00:03:30,270 So, note how the table is styled, 36 00:03:30,270 --> 00:03:36,695 so we have the header with an h2 included there, 37 00:03:36,695 --> 00:03:40,465 but let's concentrate specifically on this table. 38 00:03:40,465 --> 00:03:43,735 So you see that this table has been styled 39 00:03:43,735 --> 00:03:48,125 using some Bootstrap classes that are used to enhance the table. 40 00:03:48,125 --> 00:03:54,735 The header has been rendered with a dark background, 41 00:03:54,735 --> 00:04:00,770 and then the rules are all designed in such a way that alternate rows are 42 00:04:00,770 --> 00:04:07,295 in different color so that you can clearly distinguish the rows of this table. 43 00:04:07,295 --> 00:04:13,185 This is what in Bootstrap terms is referred to as striped table. 44 00:04:13,185 --> 00:04:17,360 This is one example of how you can style a table. 45 00:04:17,360 --> 00:04:23,250 Now interestingly, if you look at the same table in a small device, 46 00:04:23,250 --> 00:04:25,420 you would notice that the table is still 47 00:04:25,420 --> 00:04:29,450 visible except that this table now becomes scrollable. 48 00:04:29,450 --> 00:04:34,280 So, whatever can be displayed within the content will be shown and 49 00:04:34,280 --> 00:04:39,120 the rest of the table can be scrolled horizontally in place. 50 00:04:39,120 --> 00:04:47,840 So this is the responsive component of Bootstrap's support for tables in action. 51 00:04:47,840 --> 00:04:52,120 Now let's go and take a look at the code itself. 52 00:04:52,120 --> 00:04:54,970 Now obviously this table is fairly straightforward, 53 00:04:54,970 --> 00:04:57,924 it has a bunch of rows and some columns. 54 00:04:57,924 --> 00:05:02,070 So you'll be expecting me to use the typical th, 55 00:05:02,070 --> 00:05:06,365 td and tr tags there. 56 00:05:06,365 --> 00:05:08,225 Switching back to the code, 57 00:05:08,225 --> 00:05:12,490 you'll notice that I am enclosing this table inside of 58 00:05:12,490 --> 00:05:16,840 div to which I have applied the class table responsive. 59 00:05:16,840 --> 00:05:19,700 So this is what makes this table responsive so that on 60 00:05:19,700 --> 00:05:24,490 smaller screens you can horizontally scroll the table. 61 00:05:24,490 --> 00:05:26,720 Now for the table itself, 62 00:05:26,720 --> 00:05:29,800 notice how I have applied two classes. 63 00:05:29,800 --> 00:05:31,230 One is the table class, 64 00:05:31,230 --> 00:05:34,825 so this is overriding the default table 65 00:05:34,825 --> 00:05:39,375 rendering on browsers by providing Bootstrap's own classes. 66 00:05:39,375 --> 00:05:41,760 And the second one says table-striped. 67 00:05:41,760 --> 00:05:48,280 So this is what designs a table with alternate rows in different colors here. 68 00:05:48,280 --> 00:05:50,610 Then the head itself, 69 00:05:50,610 --> 00:05:55,050 so you can see that the headers described here with the class thead-dark, 70 00:05:55,050 --> 00:05:57,925 so this renders the head dark. 71 00:05:57,925 --> 00:06:06,630 And then you'll see the table draw itself described here with the th tags here. 72 00:06:06,630 --> 00:06:09,480 So this is standard table definition. 73 00:06:09,480 --> 00:06:16,410 The body of the table itself is standard html use of tr, 74 00:06:16,410 --> 00:06:22,760 and td, and th elements that you are already familiar with in html5. 75 00:06:22,760 --> 00:06:27,180 So, this is what the table is constructed with, 76 00:06:27,180 --> 00:06:31,075 and then you close the table body. So that's about it. 77 00:06:31,075 --> 00:06:36,670 So we all that is unique about Bootstrap itself is the application of 78 00:06:36,670 --> 00:06:40,060 this specific Bootstrap classes to 79 00:06:40,060 --> 00:06:47,130 the table element itself to style it further, 80 00:06:47,130 --> 00:06:51,360 to fit into a Bootstrap design web page. 81 00:06:51,360 --> 00:06:55,360 The next component that I'm going to add into the 82 00:06:55,360 --> 00:06:59,595 aboutus.html page is a card component in Bootstrap. 83 00:06:59,595 --> 00:07:02,650 The card component allows us to display content 84 00:07:02,650 --> 00:07:06,850 by setting it apart from the rest of that content. 85 00:07:06,850 --> 00:07:12,925 Now here, scrolling to the first row here, 86 00:07:12,925 --> 00:07:16,925 there we have our history in the second div use, 87 00:07:16,925 --> 00:07:20,915 notice that the first div is already occupying col-sm-6, 88 00:07:20,915 --> 00:07:23,915 the second div is currently empty. 89 00:07:23,915 --> 00:07:25,355 So to this div, 90 00:07:25,355 --> 00:07:31,320 I will add in the class as col-sm. 91 00:07:31,320 --> 00:07:40,670 Thereafter, going into this div I will introduce another div to the class card here. 92 00:07:40,670 --> 00:07:42,325 So inside those div, 93 00:07:42,325 --> 00:07:46,755 I'm going to build up my card to display some content here. 94 00:07:46,755 --> 00:07:53,870 So in this div, we will introduce a h3 that 95 00:07:53,870 --> 00:08:05,235 the class as card-header bg-primary. 96 00:08:05,235 --> 00:08:08,110 So you'll see that this h3 will be displayed as 97 00:08:08,110 --> 00:08:12,755 a card header with that background as primary 98 00:08:12,755 --> 00:08:21,165 and then text white which Bootstrap class will define the text to be white in color. 99 00:08:21,165 --> 00:08:24,715 And then inside this h3, 100 00:08:24,715 --> 00:08:31,090 I'm going to introduce the title for this card here which 101 00:08:31,090 --> 00:08:37,580 is 'Facts At a Glance.' 102 00:08:37,580 --> 00:08:41,950 So that I can show some content inside this div here. 103 00:08:41,950 --> 00:08:44,915 Now, to this card, 104 00:08:44,915 --> 00:08:48,520 next I'm going to add in another inner div 105 00:08:48,520 --> 00:08:55,950 here with the class as card-body, 106 00:08:55,950 --> 00:08:59,080 and inside this card-body will be 107 00:08:59,080 --> 00:09:03,370 the actual content that have been displayed in this card. 108 00:09:03,370 --> 00:09:10,310 Let's save the changes and then go and have a look quickly at our web page. 109 00:09:10,310 --> 00:09:12,100 Going to our web page, 110 00:09:12,100 --> 00:09:15,860 we can already see the card taking shape in our web page, 111 00:09:15,860 --> 00:09:19,620 so you can see that the left half is occupied by the History 112 00:09:19,620 --> 00:09:24,085 and the right half you'll see the card put into place. 113 00:09:24,085 --> 00:09:27,135 Let's add some content into this card. 114 00:09:27,135 --> 00:09:29,140 Going into this card block, 115 00:09:29,140 --> 00:09:32,220 now I'm going to use a description list 116 00:09:32,220 --> 00:09:36,080 and this description list in Bootstrap allows me to 117 00:09:36,080 --> 00:09:45,705 apply the row and column classes to it and thereby format the content inside. 118 00:09:45,705 --> 00:09:48,360 So inside this description list, 119 00:09:48,360 --> 00:09:52,190 I'm going to add 120 00:09:54,890 --> 00:10:00,110 in the dt that the class and col-6 here, 121 00:10:00,110 --> 00:10:03,420 so meaning that this is going to occupy six columns 122 00:10:03,420 --> 00:10:07,085 inside this description list which itself is a row here. 123 00:10:07,085 --> 00:10:13,785 So nesting as you see coming into picture here. 124 00:10:13,785 --> 00:10:16,250 So to this dt, 125 00:10:16,250 --> 00:10:20,190 I am going to add in so this description title here, 126 00:10:20,190 --> 00:10:25,470 and then below that I will add in the dd with 127 00:10:25,470 --> 00:10:33,330 the class col-6 here and then I can add in some context here. 128 00:10:36,960 --> 00:10:40,310 And dd here. 129 00:10:41,880 --> 00:10:46,755 Let's save the changes and take a quick look at our card. 130 00:10:46,755 --> 00:10:50,445 Going to our card, you can now see how 131 00:10:50,445 --> 00:10:55,265 the description list allows me to display information. 132 00:10:55,265 --> 00:11:02,700 Inside my card, you can see the left side and the right side clearly displayed. 133 00:11:02,700 --> 00:11:07,035 Here we are taking advantage of the description list and, 134 00:11:07,035 --> 00:11:09,215 adding in the information there. 135 00:11:09,215 --> 00:11:14,590 Let me finish up the remaining parts in here by adding in the code, 136 00:11:14,590 --> 00:11:19,745 and then come back and take a look at the final version of this card. 137 00:11:19,745 --> 00:11:22,850 Here, you can see that I have completed adding in 138 00:11:22,850 --> 00:11:25,895 the remaining parts of my description list. 139 00:11:25,895 --> 00:11:31,155 Let's go and take a quick look at our final version of that card. 140 00:11:31,155 --> 00:11:33,290 Taking a look at the card, 141 00:11:33,290 --> 00:11:34,620 and how it is taking shape. 142 00:11:34,620 --> 00:11:39,340 Here, you can now see how we can make use of a card to display 143 00:11:39,340 --> 00:11:41,760 some content in our web page and set it 144 00:11:41,760 --> 00:11:44,725 apart from the rest of the content to the Web page. 145 00:11:44,725 --> 00:11:50,325 So, a card is a very versatile component that allows us to display content like this. 146 00:11:50,325 --> 00:11:52,500 Let's continue with this exercise, 147 00:11:52,500 --> 00:11:56,785 adding in another card to this web page. 148 00:11:56,785 --> 00:12:01,410 Let's now again go back to our aboutus.html page. 149 00:12:01,410 --> 00:12:06,170 And right below the card that we have already added previously, 150 00:12:06,170 --> 00:12:14,790 I'm going to add in another div with the class "col-12" here. 151 00:12:14,790 --> 00:12:16,910 And then, inside this div, 152 00:12:16,910 --> 00:12:24,670 I'm going to construct another card here to display some additional information. 153 00:12:24,670 --> 00:12:26,495 So inside this div, 154 00:12:26,495 --> 00:12:30,210 I will construct a card with 155 00:12:30,210 --> 00:12:38,915 the class "card card-body bg-light." 156 00:12:38,915 --> 00:12:45,580 So, you'll see that I am applying both the card and the card-body to the same div here. 157 00:12:45,580 --> 00:12:49,300 So which means that this particular card is not going to have 158 00:12:49,300 --> 00:12:54,835 any card header but instead just contains the card-body here. 159 00:12:54,835 --> 00:12:59,545 And then, also, the bg-light means that the background will be in faded color. 160 00:12:59,545 --> 00:13:05,120 Somewhat of a grayish color added to the background. 161 00:13:05,120 --> 00:13:10,495 So this also seeks this card apart from the rest of the content here. 162 00:13:10,495 --> 00:13:12,815 Now, inside this card, 163 00:13:12,815 --> 00:13:16,250 I'm going to make use of a block code to display 164 00:13:16,250 --> 00:13:20,700 some interesting little funny piece of information there. 165 00:13:20,700 --> 00:13:23,980 So I will use a blockquote. 166 00:13:23,980 --> 00:13:30,965 This is also an HTML tag here. 167 00:13:30,965 --> 00:13:37,005 And then to this, I will apply the blockquote class of Bootstrap. 168 00:13:37,005 --> 00:13:42,590 So Bootstrap styles this blockquote in its own way. 169 00:13:42,980 --> 00:13:46,429 So let's close up that blockquote. 170 00:13:46,429 --> 00:13:47,870 And inside this blockquote, 171 00:13:47,870 --> 00:13:51,910 I'm going to include a quotation here. 172 00:13:51,910 --> 00:13:54,320 So I'll start with a p, 173 00:13:54,320 --> 00:13:56,760 and apply a class called mb-0. 174 00:13:56,760 --> 00:14:02,920 The mb-0 is a utility class that Bootstrap provides. 175 00:14:02,920 --> 00:14:05,775 What this means is margin-bottom zero. 176 00:14:05,775 --> 00:14:09,640 For this particular, whatever it is included in this p tag, 177 00:14:09,640 --> 00:14:12,135 we'll have a bottom margin of zero. 178 00:14:12,135 --> 00:14:15,865 And this helps me to display the content correctly here. 179 00:14:15,865 --> 00:14:24,900 So here I'm going to add in the actual content there, 180 00:14:49,850 --> 00:14:54,970 and then close this p. So this p contains the actual quotation. 181 00:14:54,970 --> 00:14:56,560 Now, to this quotation, 182 00:14:56,560 --> 00:14:59,180 so you see that in your content, 183 00:14:59,180 --> 00:15:05,320 you can also include quotations in your code there. 184 00:15:05,320 --> 00:15:10,730 So to this, I can also add a footer with the class. 185 00:15:10,730 --> 00:15:14,900 So let me push the footer indentation. 186 00:15:14,900 --> 00:15:20,080 So this footer is also a class that blockquote supports. 187 00:15:20,080 --> 00:15:26,620 So whatever you include in the blockquote, 188 00:15:28,570 --> 00:15:31,105 together with the footer, 189 00:15:31,105 --> 00:15:39,540 will enable you to display the author of this quotation. 190 00:15:40,420 --> 00:15:45,620 So here I am including the author, 191 00:15:45,620 --> 00:15:49,165 and then one more. 192 00:15:49,165 --> 00:15:58,860 Using the cite, I can even cite the source of this quotation. 193 00:16:01,740 --> 00:16:04,790 So you can see that. 194 00:16:24,870 --> 00:16:32,955 Again, this is just some quotation that I'm using just for fun to show you, 195 00:16:32,955 --> 00:16:35,355 also at the same time illustrating, 196 00:16:35,355 --> 00:16:42,405 how the blockquote works, 197 00:16:42,405 --> 00:16:47,800 and also how we can create another kind of card in Bootstrap. 198 00:16:47,800 --> 00:16:55,845 So with this, we have added in the code for displaying the blockquote here. 199 00:16:55,845 --> 00:16:57,890 So let me see if that changes, 200 00:16:57,890 --> 00:17:04,995 and then we'll go and take a look at how this quotation is displayed in our web page. 201 00:17:04,995 --> 00:17:09,270 Going to the browser, in our page, 202 00:17:09,270 --> 00:17:14,310 you can see that our history and the facts at a glance are displayed side by side. 203 00:17:14,310 --> 00:17:22,360 Down below that, I have this long piece of content here. 204 00:17:22,360 --> 00:17:27,850 Let's have a look at the same page in an extra small screen. 205 00:17:27,850 --> 00:17:29,250 So in an extra small screen, 206 00:17:29,250 --> 00:17:33,840 you can see that the history and the facts are stacked on top, 207 00:17:33,840 --> 00:17:38,120 and the quotation is right down below here in its own card. 208 00:17:38,120 --> 00:17:40,130 So you can see two cards, 209 00:17:40,130 --> 00:17:42,225 one below other here, 210 00:17:42,225 --> 00:17:45,860 and then the table itself displayed at the bottom. 211 00:17:45,860 --> 00:17:50,685 So the table itself is a scrollable table here. 212 00:17:50,685 --> 00:17:54,885 So with this, we complete this exercise. 213 00:17:54,885 --> 00:17:56,330 So in this exercise, 214 00:17:56,330 --> 00:18:05,950 we learned about how we can use tables and cards for displaying content in our web page. 215 00:18:05,950 --> 00:18:08,690 Now that we have completed this exercise, 216 00:18:08,690 --> 00:18:12,610 it's a good time to do a git commit.