So this should be a really short video.
All I'm going to do is add a custom bootstrap CSS file and add some styles into the index CSS and a
logo.
So if you go to the final GitHub repo or you download the final project and you go into let's just go
to the root here.
So this is the finished project, right?
If you go into front end and then source, there's this assets folder that has the logo and then styles.
And in styles we have the custom bootstrap and the custom index CSS.
So basically we just want to bring that assets folder into.
The source folder of our project like that.
And then we need to bring it in.
So let's go to.
Let's see.
So Styles now this index CSS we don't need, we can delete that.
I actually forgot about that because we now have it in the assets styles.
So what we want to do is in our index JS where we're bringing in or where we were bringing in that index
CSS and the bootstrap, I'm going to comment this version of bootstrap out the default and then I'm
going to right here import from slash assets, slash styles, slash index, CSS and then above it,
I'm going to import the bootstrap.
Let's see.
So it's called is it called is it just bootstrap?
It's bootstrap custom dot CSS.
So I'm going to put that here.
So bootstrap dot custom dot CSS, we already have that.
Okay.
Now let's save it.
And now we have a different kind of look here.
We have this like greenish grayish primary color now.
All right?
And again, this is completely optional.
If you want to stick with the regular bootstrap theme, that's fine.
I just wanted to change it up a little bit.
And then if we look at the index CSS, I just have some basic styles for like when we do the ratings,
this will make the stars yellow rating text product title some style for the tables in the admin section,
the reviews and then the carousel.
So not much, just a couple extra styles.
And if you want to add custom CSS, that's where you would put it.
And then the last thing is just to add the logo to the header.
So let's go back into the header component and let's see, we're going to import, let's say import
logo from and that's going to be, let's see, we're going to go up one level.
So dot, dot slash into assets Logo.png and then where we have our brand.
So right here we have the text of pro shop.
I'm going to keep that text, but I'm going to go.
Right above it.
And then here we'll put our image and the source is going to be to logo.
And for the alt, I'll just put.
Pro shop.
So let's save that.
And now we have the logo and it also made the nav bar thicker, which which makes it look a little less
bootstrap y.
All right.
So that's it for this video.
Let's move on to the next one where we're going to start to list some some products.
They'll be hard coded for now.
But just to just to kind of start with the product components.