Hello and welcome.
In this show we are going to use put strap to add some basic styling to our form.
So let's go and get this see the end for us drop see.
Basically see content delivery network.
So are we going to get a link for bootstrap.
So I'm just going to click on this one this is quick start bootstrap on that.
And that will take of this.
I'm just going to just copy this link here.
This is complete here Seth.
Copy that.
Rightly copy.
Are we going to open up our project on The View.
We are going to look for the application template.
So click on use.
So the views there on The View there's an application top tier mobile ERP.
This one here.
So all these here's been pre populated by the res applications so we are going to that link have just
copied a quote from the see the.
I'm going to add that in this area here.
So what I'm going to do is just use the tag here and then copy this opta that it is on the underneath
here just tap down and paste.
I don't need this bit.
I'm just going to get rid of all this.
And on the other hand a bit scary that.
Okay.
And while I go back to the CBN link and just grab that link again
copy for this to work on your application.
You must be connected to the Internet not eCard referenced the bootstrap content delivery network is
gaire allows you to access this resources but you must be online in order to access it.
So if you haven't got internet access then you wondering why the styling doesn't work because you're
not connected to DC.
So that's one of the disadvantages of you only see the Mosby connected to the Internet.
The plus side of it is that he done it install anything on your computer and you've got access to the
latest updates.
So is macleay Copy.
Go back to my template and just copy that.
Copy that there.
Just put a quote in there single quotes an all school single quote at the end of the theosis and just
bring that last bit.
So that's it.
Let's bring this in a bit.
So be a gap there and then see that save all.
Now let's open up ah block refresh.
If you see some changes to this good refresh you can see changes.
Okay will also change some so you can notice this is a bit too close to the edge so organo amend the
theosis to refer to do some changes so moved that they were a bit from the edge.
But for now we know we've got access to bootstrap because we can see reflected in the langhorn peak
here.
Also want to create some basic navigation so to do that I'm going to go to the get bootstrap website.
So if it's ipn GET PULLED strap Dr. Khan in your search engine.
You take it to this page and click on it get in started option here and just scroll down to the templates.
I just going to look for a starter template.
All right so going to use this one click on this one where it says start a template.
Click on that.
You can't see the content.
So to suit the content you either click what you do quantrell and you.
Okay and that is show he sold just one copy.
The navigation from here.
Some one copy from here all the way to their way of the navigation so make sure you get all that copied
and up brightly brightly and call copy.
So open up your template where you've got the style sheet and one place that will just copy the navigation
and pasted in here.
I am just going to make a few edits so that it can work with our application.
All right person will it us get rid of this now Bart fix up we'll on that.
Get rid of that and we gain changes to this inversed said darker colour.
I'm going to change that to default.
You can always play around with your values.
Okay.
There are good values and see what works for you so you can live the inversed one if you want that gives
you a darker colour.
And then the default is a lighter colour.
And then Wes got the projet name here I'm just going to change that to the name of my blog.
I'll see two
blogs if we scroll down here and just have a look.
Okay.
KING get rid of this class here for Lily.
We actually can't get rid of all the earth and quadling so we can use a link help instead of all this
here Reff.
So let's get rid of all that and we'll use a link help instead.
So get rid of all the links I've got rid of the other link.
We should only have the one yes one going to do I'm going to add a link Harper.
So to do that each has to tack that to percent you say that too.
He wants to set that two course to link on the score.
Thus a link helper so when you link it to somewhere.
Got to specify where we're linking it to a link to the index page and I'm going to call that home.
So I wanted to display home on the navigation and I want to go to home on this call path.
So that's the link-up not this has not been created yet so this path to the link will not work.
I'll need to add that to the rolls.
I want to add a link to the right hand side of the navigation so to do that I'm just going to copy this
here and just rename it modify it copy paste and also just change it.
Some want to add another class here and then just tab here and just say now bar dash writes referendum
in that bar.
That's on the right.
And what I want this link to refers to is to create pull some going to get rid of that and those taiping
Create.
So when you click on the link it will take you to create a new post and I need to direct it to a new
part so that the path I want direct to it will be new.
On the score post on this core PAFF for this will be a part.
It would be redirected to so was he done that.
Just click on File Save all.
Now we need to make this path work we need to add it to our rout.
So let's go to our out for that.
So we got here.
His inside are none.
Occasion.
Scroll down.
Okay.
Too many tabs open so inside the config directory we click on the routs are a B.
So we need to do we need to amend the raut here to accomodate that entry.
So what we need to do is come to the index or key ways.
The route we do come up and then type in as column space single quotes form by doing it this way.
It will recognize the path.
Now this should work quick save all.
I just grab my site refresh.
We should have a link fully everything's wattana a key so you can see here we now have a link to create
posts of quick on this link.
It should take me to the cripple's excellent click that that takes me back to the.
So if you notice this is too close to the edge to the top side going to wrap things around.
It did some someone open the template here.
Application to his team a B and when to come to the field here was quite a yield.
I'm just going to wrap that in a div So I'm going to come here and create a deal.
T I ve a div class.
I said that to you.
Course to contain.
Okay.
Just bringing that close a bit on our close today.
And come here and close the deal.
So the Phi refresh now you should see the difference.
You can see that it's moved away from the edge.
Now another thing I want to do quickly is make the form look a bit decent so factually Creole post at
the moment the form doesn't look too attractive.
So I just want to add a bit of flavour to it to make it look more presentable.
So let's go to the views and then the post and then we'll go to dinner you Hugh.
So this is where we have some bootstrap classes now will make one more presentable.
So to add a bootstrap class well we need to do we need to make some modification to the form.
So what we need to do here we just need to add a combat and then put some curly braces in between the
collar braces.
We're going to add a strap class and say class and we're going to send that to you course to form that
control.
So this is a bootstrap class that we're going to do the same for the body as well.
When do come out here and then put curly braces and on low class and we go out and we want that to direct
too.
So I've completed the other classes.
So here where I have added a class and make sure the parran THIS IS YOUR add.
Don't leave any gaps between the band.
This is if not it will not work.
So make sure there's no gap between the apprentices.
And this is here.
And that includes impound says have done the same here with the body thus the opaline.
That's the closing with the submit button also.
That's the opening parenthesis closing.
So make sure you wrap it round because we add in a class.
So for this meet about Bonton space button dashed primary and I've used the same classes for put the
title on the body so that should be it.
So fine just click fast save or my form should refresh.
Yeah.
So the form should look like this.
It looks like it.
That means you have successfully implemented the boot strap classes.
So that's it for this lecture.
Apologies is taking so long.
I just wanted to get everything in to this lecture.
Thanks for watching.