So early on in the course, I told you that the only reason I was including Jorquera in the project
was to satisfy the requirements for bootstrap, bootstrap for and while I was putting the course together,
Bootstrap actually released the beta version Beta one, a version five, which no longer requires.
So even though I would never use a beta version of bootstrap any production environment, presumably
the full release version five will be coming out in the not too distant future.
And this is stable enough that I can actually implement it on this project in this course.
And hopefully the updates for version five, they claim that there's not going to be any significant
changes.
So the process should be pretty much the same.
So just for fun, let's upgrade to bootstrap five on the public version of our site.
I'm not going to do it for the back end, but I will do it for the public version.
So to do that, let's get started.
Let's click on download.
So we use the CDN versions the same as we did last time.
We'll just go down here and find these.
Here is the bootstrap min and the bootstrap bundles.
Let's copy those and we'll go over to our code, find the base layout right here and at the top will
comment out the part where we put bootstrap version four in.
I'll just comment it out in case I need to roll back and I'll pasting what I just copied.
So the top one is the success.
So I'll get this line, which is the JavaScript.
I want that at the bottom of my file and we'll go to the bottom of the file and find the bit where we
have all of these, which includes J queries.
We'll comment that out and we'll paste this in and I'll just reformat everything.
OK, now there are some of the changes required if I actually just save this and start my application,
restart restarted to make sure it's the current version.
And I go back to my Web browser and I go to localhost eighty eighty, you'll see that things aren't
quite right.
I have this current bit here.
The drop down menu doesn't work, so there's some other changes that are required.
So let's go back to the documentation for version five and find the content bit and we'll look for the
navigation bar.
Now it must be under layout components.
That's where it is.
And we'll find the number and find that example, and I'll just copy this example and I'll replace what's
in my layout.
So right here, basely, where's my nav?
There it is.
OK, so this part here is going to be replaced.
So what I'll do is just paste this navigation bar underneath it, hide everything, split my browser
or my I.D. and the two windows.
So this is the old version here starting at NAV and this is the new version here.
OK, so I'll just modify this to make it look to make it work the way that our existing one does.
So at home, I just change the URL, OK, and then I have a link.
What's the second thing I have about.
So we'll change this to a vote and it goes to slash about and next I have a dropdown for rooms so I'll
leave this to rooms and then I have only two links in there so I can just get rid of these two here
and change this one to generals' quarters
and change this one two majors suite and fix the URLs majors suite
generals quarters.
OK, let's save that and just see how it looks.
I'll have to Navarros when I refresh this page, but the second one should work and it does OK and I
misspelled about it.
So let's fix that.
And what's next.
We have search availability which is an item, so I'll just copy this one.
Overwrite this one.
And change that to search availability and the world is search availability, and I'll get rid of the
search because we're not going to have that search availability.
That's correct.
And after that, we have what do we have after that contact?
Contact becomes contact, and then we have this elai is authenticated, div class equals nav item.
Yes.
So we can just copy that entire elai and paste that right in here.
And I think that's it, except for the color.
So what's the color of this one?
Navar Dark and Viji Dark Naver Dark and Viji Dark.
And I should be able to comment this entire old nav bar out which starts right here and goes right down
to here.
And if I comment that out, save everything and go and reload this page.
There it is.
And rooms works.
Yes.
OK, so that part worked.
Now the next part that we need to fix is this.
This doesn't work anymore, our slider.
So fortunately that one's pretty easy.
So we'll just close this, open up our homepage, find the carousel.
And all they've really done here is I need to add, if you'd read the documentation, you'll see this
and all.
You'll see you'll see that the only changes I need to put vs dash in after data.
So I'll copy dashboards and put it everywhere.
There's a data in here.
And I think that's all we'll have to do.
OK, any other BBSes now let's try that, reload this page and this should work down and it does.
And there that's all that was required to update our site, our public facing site anyway, to use bootstrap
five without jorquera instead of bootstrap for with query.
And the minified JavaScript that's included with bootstrap five is considerably smaller than query.
So actually our site will load a little faster and it's always good to try to keep things up to date
with the latest versions whenever possible.
As I said, I tend to avoid making anything that's a beta or even usually a DOT zero release.
I wait until things have been all the little bugs have been ironed out.
So when I actually upgrade any sites that I'm maintaining to bootstrap five, I'm probably going to
wait for bootstrap five point zero point one or point two.
But for this course, using the beta version just to demonstrate how to upgrade from bootstrap for to
bootstrap five, no worries there whatsoever.