1 00:00:02,390 --> 00:00:05,370 Now to get started with bootstrap, you again, 2 00:00:05,370 --> 00:00:08,340 should create a new file in a new folder. 3 00:00:08,340 --> 00:00:10,890 Here, I'm again, in an empty folder. 4 00:00:10,890 --> 00:00:15,530 And I will again add my index HTML file. 5 00:00:15,530 --> 00:00:18,500 And now I want to build a basic website, 6 00:00:18,500 --> 00:00:21,303 an example website, with bootstrap. 7 00:00:22,470 --> 00:00:26,600 For this, before we copy and paste any example code, 8 00:00:26,600 --> 00:00:29,150 we should go back to the getting started part 9 00:00:29,150 --> 00:00:33,250 of the documentation here on get bootstrapped.com, 10 00:00:33,250 --> 00:00:35,573 and there go to introduction. 11 00:00:36,460 --> 00:00:38,720 Now here you learn that the easiest way 12 00:00:38,720 --> 00:00:41,170 of adding bootstrap to your page 13 00:00:41,170 --> 00:00:43,990 is to add this link element, 14 00:00:43,990 --> 00:00:46,470 which simply loads a CSS file 15 00:00:46,470 --> 00:00:49,130 that was not written by you and that is 16 00:00:49,130 --> 00:00:52,310 not stored on your computer, but which is 17 00:00:52,310 --> 00:00:56,120 instead loaded from some web address. 18 00:00:56,120 --> 00:00:58,640 So it's stored on some remote server, 19 00:00:58,640 --> 00:01:02,360 some remote computer, and we load it from there. 20 00:01:02,360 --> 00:01:04,269 And that is something you can do in 21 00:01:04,269 --> 00:01:07,050 web development and HTML. 22 00:01:07,050 --> 00:01:09,420 So here we can click this copy button 23 00:01:09,420 --> 00:01:13,610 or manually copy this entire code here. 24 00:01:13,610 --> 00:01:16,570 And then in our index HTML file 25 00:01:16,570 --> 00:01:19,410 I'll add this default website skeleton, 26 00:01:19,410 --> 00:01:21,203 this HTML skeleton here, 27 00:01:22,180 --> 00:01:26,870 and here I'll name this third-party example. 28 00:01:26,870 --> 00:01:28,760 And below this title, 29 00:01:28,760 --> 00:01:33,760 I will now add, copy in, this link here. 30 00:01:33,900 --> 00:01:36,350 And I'll press that auto format shortcut, 31 00:01:36,350 --> 00:01:40,540 which does actually split this across multiple lines. 32 00:01:40,540 --> 00:01:43,410 So now we have line breaks inside of one of the same 33 00:01:43,410 --> 00:01:47,040 element, but not inside of the attribute values, 34 00:01:47,040 --> 00:01:50,233 but instead between our different attributes. 35 00:01:52,260 --> 00:01:54,649 And those line breaks as learned before, 36 00:01:54,649 --> 00:01:58,590 are simply added to improve readability. 37 00:01:58,590 --> 00:02:01,070 Now we can see that on our link element, 38 00:02:01,070 --> 00:02:04,299 we now also have more attributes than what we saw before, 39 00:02:04,299 --> 00:02:07,140 but we can ignore these attributes for now. 40 00:02:07,140 --> 00:02:09,220 In the end, these are just attributes, 41 00:02:09,220 --> 00:02:12,870 which ensured that the bootstrap CSS file 42 00:02:12,870 --> 00:02:15,793 is loaded appropriately and securely. 43 00:02:16,660 --> 00:02:20,200 And now that does enable these bootstrap 44 00:02:20,200 --> 00:02:23,043 CSS classes on our page. 45 00:02:23,890 --> 00:02:27,200 Now, we could get started and use bootstrap 46 00:02:27,200 --> 00:02:31,230 by going back to components and there maybe grab 47 00:02:31,230 --> 00:02:33,410 the nav bar. 48 00:02:33,410 --> 00:02:36,714 So click on nav bar and then here we could add 49 00:02:36,714 --> 00:02:40,140 such a navigation bar to our page. 50 00:02:40,140 --> 00:02:44,200 And for this we can just copy all that code here, 51 00:02:44,200 --> 00:02:47,250 if we want to, this example code, 52 00:02:47,250 --> 00:02:49,270 and then add it on our page. 53 00:02:49,270 --> 00:02:51,110 Now, of course you can always tweak this 54 00:02:51,110 --> 00:02:52,260 to your requirements. 55 00:02:52,260 --> 00:02:54,350 You don't have to use the full code, 56 00:02:54,350 --> 00:02:56,790 but here I do want to use that full code. 57 00:02:56,790 --> 00:02:59,070 So instead of the body, we maybe add a 58 00:02:59,070 --> 00:03:02,250 header element and inside of that header, 59 00:03:02,250 --> 00:03:06,403 I now paste in this bootstrap example code. 60 00:03:07,720 --> 00:03:11,150 This nav element with all its nested elements 61 00:03:11,150 --> 00:03:14,013 and the those bootstrap CSS classes. 62 00:03:14,990 --> 00:03:17,920 And now I pressed the auto format shortcut, 63 00:03:17,920 --> 00:03:19,300 I'll save everything. 64 00:03:19,300 --> 00:03:21,880 And if we now open this page 65 00:03:21,880 --> 00:03:24,190 with the live server extension again, 66 00:03:24,190 --> 00:03:29,190 you should see your navigation bar here at the top. 67 00:03:29,280 --> 00:03:32,610 And we have that because of those CSS classes 68 00:03:32,610 --> 00:03:34,603 that are added in this code. 69 00:03:35,900 --> 00:03:39,200 Now, if you read through the full documentation 70 00:03:39,200 --> 00:03:41,750 for the nav bar, you do actually learn that 71 00:03:41,750 --> 00:03:44,500 there are many things you can customize 72 00:03:44,500 --> 00:03:48,040 and fine tune to your exact requirements, 73 00:03:48,040 --> 00:03:49,800 whatever you need. 74 00:03:49,800 --> 00:03:53,020 And um here, I will keep it fairly simple 75 00:03:53,020 --> 00:03:55,490 because this is just an example 76 00:03:55,490 --> 00:03:58,470 to introduce you to bootstrap, but of course, 77 00:03:58,470 --> 00:04:01,758 feel free to play around with those different options 78 00:04:01,758 --> 00:04:03,690 and the different classes and the 79 00:04:03,690 --> 00:04:06,130 different ways of using this toolbar, 80 00:04:06,130 --> 00:04:09,160 since you have a lot of flexibility here. 81 00:04:09,160 --> 00:04:12,320 But I'll stick to this basic example here, 82 00:04:12,320 --> 00:04:15,480 because it's not about building an actual website here, 83 00:04:15,480 --> 00:04:18,209 but just about getting started with third-party 84 00:04:18,209 --> 00:04:19,822 packages in general.