All language subtitles for 2. Adding Bootstrap Globally

All right, everybody, let's go ahead and get started with working on our restaurant application.

Now, for the first few videos, we're just going to work on the landing page.

So we have the nav bar as well as the restaurant to the header, as well as that link that's going to

navigate us to the top 50 restaurants page.

So in order to do this, of course, we need to go ahead and create a brand new Knox application to

save some time.

I already did this, but just as a refresher, if you are unfamiliar, you're going to navigate into

whatever directory you want to create this application in, and then you're going to do Inpex Knoxy

and PDX Knoxy.

And then in net, and then you're going to give your application a name.

I called it O2 top restaurants.

You can call it whatever it is that you want.

Now, once you create this, what you want to do is you want to navigate into that application so I

can go over here and do C, D, and then whatever you call it, I'm going to call my name, for instance.

And then once you navigate into it, you just do an AMPM install and then open it up into your favorite

text editor and then just do an AMPM run dev to have it running on your local machine.

Okay, so that's pretty much it.

And we're going to continuously do this, so you will get used to it.

Now, once you have that, you're going to have this, you know, default application up and running.

You can go ahead and remove this.

KNOX Welcome.

So we can just have no boilerplate right away.

Now, I mentioned that for this application we are going to do some custom styling, but I don't want

to start focusing on styling too much.

So what I want to do is I want to use an external library that is going to provide us with a bunch of

styles that correspond to some custom classes.

And the most popular one by far, and probably the one that you are also familiar with is bootstrap.

So this is what we're going to be using.

So bootstrap is a library or a popular framework that's going to allow us to style our applications

relatively quickly.

So there's a bunch of UI elements or bunch of layout elements that we can utilize.

So for example, over here we have a bunch of you have a container class that's going to give us some

styling to create a container.

Now how are we going to get this right over here, bootstrap connected to our Nook's application?

Well, the way to do it and let me zoom in here once more is to very simply add this link tag right

over here into your HTML elements.

And then inside of that HTML, because we have that link tag, any class that corresponds to any bootstrap

class is going to provide us with styles that bootstrap is supplying us with.

However, the only issue that we're facing right now is inside of our Nux application.

There actually isn't any HTML file.

So how in the world are we going to get this link tag connected to our nook's application?

So that's what we're going to be doing inside of this video.

We're going to figure out how we can get this link tag connected to basically every single component

and page in our app.

Now, because we want to have this as a global style.

So any single component as well as any single page in our application has access to these bootstrap

classes.

What we can very simply do is actually plug it in inside of the nux dot config dot t s file.

So this is just a place where we can configure our nux application and we can configure it in many,

many, many different ways.

But the way that we want to configure it right now is very simply add this link tag to almost every

single component that we have, and that is exactly what we are going to do.

So let's go over here and what we're going to do is specify meta.

This is just basically meta data that we're going to be specifying.

And then right in here, we're going to specify a link.

Now this is going to be an array because we can have multiple links throughout our app.

We can have this link, we can have other links if we want.

Now over here, we're going to provide an object.

And then right in here we're going to specify the role.

So right over here, this is this portion right over here.

So we're going to specify that this is going to be a stylesheet.

So let's go here.

We're going to say rel stylesheet.

And then what we're going to do is specify the ETF.

So this is this component of the the link tag.

So we're going to go ahead and grab that.

So go ahead and grab that leg.

So and then we're going to do each ref now we're going to go ahead and add that ETF.

So let's just go ahead and save that.

And that right there is all it is that we need in order to get bootstrap working with our application.

So any time we use a bootstrap class, we actually should see those tiles in our app.

Now in order to test us out what I recommend doing anytime you makes any sort of change in the config,

I recommend just closing your application, closing your development server by doing control C and then

running it again.

Now what I'm going to do here is I'm going to say hello, so I'm going to say hello over here.

And once I do that and I go back to my Knox application just waiting for it to load, I should see a

blank page with.

Hello.

Let me zoom in here.

There we go.

We see it.

I'm like 500% zoomed in.

So right here we see it.

Now what I'm going to do is I'm going to wrap this with the class called container.

So this is going to be a default bootstrap class that I am going to add in here.

And what it should do is essentially provide some margin and wrap this somewhere more in the middle.

So over here, I'm gonna go ahead and save that.

And there you go.

You can kind of see it now.

You might not be able to see it that much because it's really zoomed in.

So I'm going to do is I'm going to get rid of it for now.

I might zoom out a little bit.

Hopefully you can kind of see the halo over here and I'm going to go ahead and add that container again.

And you can see here that we do indeed get it.

You can see that there's a little bit of a margin here and it is working a okay.

So I hope that is clear and that is how we are going to connect these global stylesheet inside of Linux

dot config dots.