1 00:00:00,540 --> 00:00:01,420 Hello again, everyone. 2 00:00:02,070 --> 00:00:10,710 So I want to add bootstrap to our project for this lesson, I'll continue throughout this course just 3 00:00:10,710 --> 00:00:15,140 using the first project that we created with the default settings. 4 00:00:17,120 --> 00:00:23,420 So now here's the first thing I want you to do is clean this page completely to do that, delete everything 5 00:00:23,420 --> 00:00:25,940 in the app component that HTML. 6 00:00:29,340 --> 00:00:36,780 So look, now a blank page appears in the browser, remember what I mentioned before, what we see in 7 00:00:36,780 --> 00:00:41,100 the browser is in the Avatar component, that HTML page. 8 00:00:42,620 --> 00:00:46,880 So by cleaning this section, we'll have a well, a clear slate to work with. 9 00:00:48,490 --> 00:00:57,220 All right, so we want to add bootstrap to our project and use readymade textiles for our styles, and 10 00:00:57,220 --> 00:01:00,430 for this we'll need to install bootstrap via NPM. 11 00:01:01,670 --> 00:01:07,310 So inside this eye, right, npm install, double dash, save, bootstrap. 12 00:01:08,160 --> 00:01:09,240 Right here in the terminal. 13 00:01:11,670 --> 00:01:14,370 And so the latest version of Bootstrap gets loaded. 14 00:01:16,630 --> 00:01:22,840 Now, we had previously uploaded globally and we're typing G in between this time, we installed Bootstrap 15 00:01:22,840 --> 00:01:23,500 locally. 16 00:01:27,260 --> 00:01:32,120 All right, so the offloads complete and bootstrap for has been loaded into our project. 17 00:01:33,470 --> 00:01:37,550 And bootstrap should be installed under no doubt module's. 18 00:01:38,590 --> 00:01:40,530 So when we look now, we'll see it here. 19 00:01:41,760 --> 00:01:48,540 And the installation looks successful now if you can't see the bootstrap file under node modules, try 20 00:01:48,540 --> 00:01:50,790 turning off Visual Studio Code. 21 00:01:52,880 --> 00:01:57,520 When you open up your editor again, you'll see the bootstrap under Noad Module's. 22 00:02:00,640 --> 00:02:05,980 All right, so you can see it successfully installed, so now we need to notify Angular. 23 00:02:07,140 --> 00:02:09,030 Of our bootstrap now. 24 00:02:10,030 --> 00:02:16,390 There's not much we have to do about that, actually, we just need to specify it in Angular Jason that 25 00:02:16,390 --> 00:02:17,740 we use bootstrap. 26 00:02:18,730 --> 00:02:21,310 So now just open, angular, Jason, and. 27 00:02:22,630 --> 00:02:31,780 Look here, it says style success under the style section, under the SIRC or sauce folder. 28 00:02:34,720 --> 00:02:39,130 So if you remember, we made six definitions for Stiles while creating a project. 29 00:02:40,040 --> 00:02:46,880 And here we can edit styles within this page if we want to, but now I just want to use the ready-Made 30 00:02:46,880 --> 00:02:48,080 code for styles. 31 00:02:48,980 --> 00:02:57,440 And we just need to specify the bootstrap address here, Snel right node module's first right here and. 32 00:02:58,410 --> 00:03:04,290 When we look, we can see that there are many dependencies under no module's. 33 00:03:07,160 --> 00:03:17,080 When we go down a little bit, we'll see bootstrap and bootstrap, then dissed, then success and bootstrap 34 00:03:17,120 --> 00:03:22,000 that success and then bootstrapped, Mendoza says I. 35 00:03:22,150 --> 00:03:31,600 So I'm just going to write one by one and the angular dot Jason folder nowhat underscore module slash 36 00:03:31,620 --> 00:03:32,360 bootstraps. 37 00:03:37,240 --> 00:03:37,940 Yes, yes. 38 00:03:40,270 --> 00:03:42,340 Bootstrapped Mendax, yes. 39 00:03:46,750 --> 00:03:50,860 So what we do here is just report the bootstrap address. 40 00:03:51,970 --> 00:03:56,290 It was very important to enter the path correctly here, double check it, make sure. 41 00:03:57,540 --> 00:04:03,270 Now, just save the changes that we made and run and serve to add a new configuration. 42 00:04:06,180 --> 00:04:10,470 Great, so now let's have a look at localhost Colin 4200. 43 00:04:12,220 --> 00:04:17,500 Now, of course, the page is blank because we've deleted everything in the outer component, not HTML 44 00:04:17,500 --> 00:04:17,950 page. 45 00:04:19,920 --> 00:04:22,710 But let's say inspect here. 46 00:04:24,060 --> 00:04:31,230 So when we look at the elements, we can see that there are two choices for styles, the first of these 47 00:04:31,230 --> 00:04:32,950 is bootstrap. 48 00:04:33,360 --> 00:04:33,660 All right. 49 00:04:33,660 --> 00:04:35,400 So that means we've added it correctly. 50 00:04:35,430 --> 00:04:36,090 Good job. 51 00:04:43,410 --> 00:04:46,350 And now I want to show you a little example, so. 52 00:04:49,900 --> 00:04:54,760 I'll come up here to the Dow component, that HTML page and here, all right. 53 00:04:54,790 --> 00:04:56,650 Hello, world with an H2 tag. 54 00:05:04,520 --> 00:05:08,570 So when I say the changes, we see the bootstrappers use for style. 55 00:05:10,910 --> 00:05:20,120 And now we can add a button to try out to so simply want to add and here I want to show that we're only 56 00:05:20,120 --> 00:05:24,080 using bootstrap and we can add the code available in it. 57 00:05:30,540 --> 00:05:35,790 All right, so we've just seen how to include a new configuration in our project. 58 00:05:36,330 --> 00:05:43,290 First, we saved Bootstrap to our project and we notified Angular of the bootstrap files downloaded 59 00:05:43,290 --> 00:05:45,300 under node underscore modules. 60 00:05:46,280 --> 00:05:51,260 To do this, we included the bootstrap path to angular Jason. 61 00:05:52,650 --> 00:05:53,070 Cool. 62 00:05:53,520 --> 00:05:55,470 All right, so I think we've done enough here. 63 00:05:56,420 --> 00:05:57,470 See in the next lesson.