All language subtitles for 4. A Touch of Styling

We've already got this versatile input put together but it would be kind of nice if we had some styling

that looked a little bit closer to this right here.

Doing this video we're gonna take kind of a brief pause or kind of divergence away from this idea of

pipes and just add in a little bit of styling to do so we're gonna add in the bootstrap at CSX library

and on previous projects we made use of Boma.

We're gonna flip over to using Bootstrap instead for a little bit for no reason whatsoever really just

for a little bit of variety.

To be honest with you let's figure out how we add in bootstrap to a typical angular project do so.

First go over to my terminal.

I'm gonna open up a new terminal window still inside of my pipes directory and then inside there I'll

install bootstrap with npm install bootstrap.

This is another module that is very very small so it should only take a moment or two to install it

once it is installed.

We then need to wired up in the exact same way that we previously wired up the boma CSX library.

Remember we have to add in an import statement to our global styles dots ISIS file before we add that

in.

However we need to find where the actual bootstraps ISIS file was installed inside of our node modules

directory.

We'll find that node modules folder inside there I'll scroll down and find the bootstrap directory.

Here it is right here and then inside that directory I'll find the disk folder which stands for distribution.

Inside there is the CSX folder.

And then finally inside there is the bootstrap dot CSX file.

We can add in an import statement to our styles Nazi SS file and get bootstrap dist SS bootstrap dots

ss.

Let's do that right now.

I can slide my styles Nazi SS file I'll add in at import then bootstrap slash and I've already forgot

the path for it.

So let me look at my notes here so I can remember exactly what it is.

So it's bootstrap ist the SS bootstrap dot CSX.

There we go.

You think I would remember that but near recording your voice you just get so stressed out.

I'm just kidding.

Okay.

So I'll save this and if I then flip back over to my application I see it definitely some different

styling here.

So that means we just wired up bootstrap successfully.

So now let's just add in a couple of HDMI elements and class names.

Get this versatile thing right here looking a little bit better back inside of my app component template.

We're gonna write out a pretty good amount of each team out inside of here at the very top.

I'm gonna add in a div with the class of container add in an h three that says payment form

I'll then take a look at this div right here I'm going to indent it just to make sure that it's inside

the diff class Container and I'll add on a class of road to it and inside that div I'll add another

one with the class of form dash group CIOL And I'm going to close off that div on the other side of

the text input

and on the input itself I'll add on the class of form dash control now right above the closing div of

row.

So here's the closing date for row right here.

I'm gonna add on one more div with the class of SEO COLB

inside of there.

I'll put in a label with a B element just to bold some text inside that bold element or write out name

and just one last little bit here we'll put in a div right after that label and inside there is wearing

in a place the output of the name with the title case pipe and then finally I'm going to make sure that

I close off the overall issue of class container.

I'll put one last closing tag down here at the bottom okay.

So a little bit of each female here.

But don't worry we'll only have to write this out once we're going to copy paste this for everything

else we need to show.

Well now flip back over and there we go.

Say that looks pretty close to the mockup.

We were just looking at now I can type in scarlet writer and I see the name capitalized over here.

Very good.

OK well that was pretty simple to make you said that very straightforward operator.

The title case operator.

Well now let's now take a look at some more complicated ones in the form of something to format a date

and something in a format a currency as well.