 Hello, this is Christian. So in this video, I'm going to go over unit 2, the bootstrap theme for you. Now, in the video here is based on an older theme that had a folder called vendor, which I'd noticed that the newer version of the bootstrap doesn't have that anymore. So we're going to fix that, OK? I wasn't able to find the old files anymore, so I'm very fortunate. But the change is very simple, actually. It's actually much simpler than the previous one. So if you click this link here, it takes you here. And again, for this app, you can use anything with your choice. If you like a different theme, feel free to use that or build your own, or you don't have to use anything, but I'll just make your page really nice. That's OK. But if you do want to use this theme, then here's the download. Click that. And what you're going to get is a zip file. You unzip that to your system. So in my example, I found a desktop. It opened that folder. And you're going to see these files in here. So again, notice there's no more vendor folder in here, OK? And they took that out because they're using a CDN as opposed to the vendor for the bootstrap, which is OK. So what you do is that now in your Angular application, make sure it's running. So you can see the output. So here's the app that's running right now already. And we want to get rid of this bar on the top and then maybe add a footer on the bottom. That's what this theme will look like, right? So that's what we're going to do. So over here, under the fly app, inside the src folder, you're going to have this index HTML. This is the index of the root template that Angular uses. So you want to move anything that this file needs into this file, right? And so in your zip file, zip folder, and all you have to do is the access folder is nothing. They're just the favicon. So I don't really need it because Angular only has one. As you can see, the assets, I mean, not in here too, but they would have a favicon. So you can just ignore that. And that is this favicon here, OK? And so what we're going to do is we're going to drag. So basically, you want to drag this, I mean, not the index, but drag the CSS and JS into the assets folder. I think it seems to be working better that way. And then the index is, it doesn't matter. You can pull on there. It's fine. So I'm going to drag all of these, OK? Put it inside the assets folder. So they're in here now. If it doesn't let you drag and drop in here, then you need to go and find where this file is on your window, a system or your Mac or whichever system you're using, and copy into this folder. So from here, it's very easy to find. You can right-click on this folder here, for example. Right-click on it, review an Explorer. And that should open up your window. And that's where you store your file, right? This is the SRC of this folder. And then here, then you can go ahead and open that. And then the other folder, what I had earlier was over here. And then same thing, just drag it and put it inside here, which I did already, so you can see it's already here, OK? And so you can close this and close this as well. Now, because we're inside the SRC folder, the assets folder here, you want to move things over, OK? So like in the JS file, this is the one that the template uses. If you open that, you've run it. It should look exactly like you saw on the site. So if I run this file, OK, hopefully it will launch it. OK, so you can see this is our Angular app. And this is the theme that you want to use, all right? So we just want to grab the navigation bar and the footer bar here. So the internal content, we don't really need it. But we do want to keep the CSS and the JavaScript that comes with this template, all right? So let's go back here and go back into the theme here, OK? So this is the template we want to use. So again, you don't need the file icon. We just need the style sheet, which is this one here. I'll copy the comment with the two, so I don't know what's going on. And then copy it and then paste it to your file here, the Angular file, right? So it's in here. And then go back and then I need the navigation, which is this line 15, all the way to line 29. Copy that, OK, put it into the body. It's right above the app root tag. Then you put the footer right below here. So the footer is at the very bottom. You're going to skip all of these, go to the very bottom, and here's the footer, including the two scripts, OK? So copy everything here and then paste it right down here. And so it looks pretty good, right? Now notice that this file is outside here, but the scripts and the CSS are inside the assets folder. So relative to this file. So we need to add here assets slash then CSS. That's already good to go. Same thing down at the bottom. So assets slash js, OK? And just do a right click and format. So make it nicer. And there we go. So this is the navigation on the top. I'll collapse this. You can see better. And the footer down here along with the two scripts. And the reason why there's no more vendor folder is because they're using the CDN coming directly from the internet now, as opposed to downloading the bootstrap themes or the other CSS and everything that has it with the bootstrap. So now they're using the CDNs before they got rid of the vendor folder. That's why you don't see anymore, OK? So with this method, though, however, you have to make sure that you're always on the internet because it's connecting to the internet, right? That's the only thing. OK, so say that. And then if you go back to the web page, hopefully it will have some changes. Refresh that page. OK, so you see that the navigation, the footer is already changed. The navigation tab is there. You just don't see it because this blue bar is hiding it. So for example, if you refresh it, you can see it right away, right? You go like that and then boom, it's gone. So if I do that for hide this bar, which is the Angular bar, you should see that right there, right? So it's right there already. So we want to do that. So we just want to get rid of the content inside the Angular app here. So to fix that, basically, very simple. So you can go back to this file. And I think it's already part of the video, but I'll show you just very quickly anyway. So this part is pretty much done for this integration. And then continue on, you're going to create components for this and this separately. But I'm not going to do it in this video again, OK? So in the app folder, you see this app component HTML, right? You can remove all these comments, OK? It has a lot of comments here. The style sheet starts from line 2 all the way to almost 295. OK, so I'm going to go down. Yeah, so all these stuff will be removed eventually. But I do want to show you. So yeah, anyway. So the toolbar, this one here, this is the toolbar on the very top and the banner at the top. So you can just basically, let's see how big this is. Yeah, this is the whole thing from 298.318, right? So select that, comment it out, OK? Control forward slash will comment it out. If you save that and just save it, go back to the site. And you will see that now the blue bar is now been removed. OK, so there we go. And then from here on, you just follow the rest of the video to build the components and you should be good to go. OK, if you have any questions again, please do let me know. Thank you.