1

00:00:00,780 --> 00:00:07,650

So early on in the course, I told you that the only reason I was including Jorquera in the project



2

00:00:07,650 --> 00:00:13,920

was to satisfy the requirements for bootstrap, bootstrap for and while I was putting the course together,



3

00:00:13,920 --> 00:00:20,880

Bootstrap actually released the beta version Beta one, a version five, which no longer requires.



4

00:00:22,110 --> 00:00:29,310

So even though I would never use a beta version of bootstrap any production environment, presumably



5

00:00:29,310 --> 00:00:33,200

the full release version five will be coming out in the not too distant future.



6

00:00:33,210 --> 00:00:39,000

And this is stable enough that I can actually implement it on this project in this course.



7

00:00:39,630 --> 00:00:45,090

And hopefully the updates for version five, they claim that there's not going to be any significant



8

00:00:45,090 --> 00:00:45,660

changes.



9

00:00:45,690 --> 00:00:47,590

So the process should be pretty much the same.



10

00:00:47,610 --> 00:00:52,520

So just for fun, let's upgrade to bootstrap five on the public version of our site.



11

00:00:52,530 --> 00:00:55,680

I'm not going to do it for the back end, but I will do it for the public version.



12

00:00:56,070 --> 00:00:57,570

So to do that, let's get started.



13

00:00:57,570 --> 00:00:58,650

Let's click on download.



14

00:00:59,520 --> 00:01:02,190

So we use the CDN versions the same as we did last time.



15

00:01:02,190 --> 00:01:03,870

We'll just go down here and find these.



16

00:01:04,470 --> 00:01:07,800

Here is the bootstrap min and the bootstrap bundles.



17

00:01:07,800 --> 00:01:18,180

Let's copy those and we'll go over to our code, find the base layout right here and at the top will



18

00:01:18,180 --> 00:01:22,050

comment out the part where we put bootstrap version four in.



19

00:01:22,050 --> 00:01:26,910

I'll just comment it out in case I need to roll back and I'll pasting what I just copied.



20

00:01:26,910 --> 00:01:30,090

So the top one is the success.



21

00:01:30,090 --> 00:01:32,280

So I'll get this line, which is the JavaScript.



22

00:01:32,280 --> 00:01:37,170

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



23

00:01:37,170 --> 00:01:41,120

have all of these, which includes J queries.



24

00:01:41,130 --> 00:01:47,880

We'll comment that out and we'll paste this in and I'll just reformat everything.



25

00:01:48,510 --> 00:01:54,220

OK, now there are some of the changes required if I actually just save this and start my application,



26

00:01:54,570 --> 00:01:56,520

restart restarted to make sure it's the current version.



27

00:01:57,030 --> 00:02:03,600

And I go back to my Web browser and I go to localhost eighty eighty, you'll see that things aren't



28

00:02:03,600 --> 00:02:04,470

quite right.



29

00:02:04,680 --> 00:02:06,240

I have this current bit here.



30

00:02:06,660 --> 00:02:09,900

The drop down menu doesn't work, so there's some other changes that are required.



31

00:02:10,230 --> 00:02:19,260

So let's go back to the documentation for version five and find the content bit and we'll look for the



32

00:02:19,260 --> 00:02:20,280

navigation bar.



33

00:02:20,280 --> 00:02:23,580

Now it must be under layout components.



34

00:02:23,580 --> 00:02:24,210

That's where it is.



35

00:02:26,670 --> 00:02:34,980

And we'll find the number and find that example, and I'll just copy this example and I'll replace what's



36

00:02:34,980 --> 00:02:36,200

in my layout.



37

00:02:36,960 --> 00:02:41,490

So right here, basely, where's my nav?



38

00:02:41,640 --> 00:02:42,240

There it is.



39

00:02:42,300 --> 00:02:45,280

OK, so this part here is going to be replaced.



40

00:02:45,300 --> 00:02:53,940

So what I'll do is just paste this navigation bar underneath it, hide everything, split my browser



41

00:02:54,180 --> 00:02:56,050

or my I.D. and the two windows.



42

00:02:56,640 --> 00:03:04,590

So this is the old version here starting at NAV and this is the new version here.



43

00:03:05,200 --> 00:03:11,970

OK, so I'll just modify this to make it look to make it work the way that our existing one does.



44

00:03:11,970 --> 00:03:18,120

So at home, I just change the URL, OK, and then I have a link.



45

00:03:18,120 --> 00:03:19,980

What's the second thing I have about.



46

00:03:20,400 --> 00:03:30,940

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



47

00:03:30,940 --> 00:03:39,450

leave this to rooms and then I have only two links in there so I can just get rid of these two here



48

00:03:40,680 --> 00:03:44,370

and change this one to generals' quarters



49

00:03:47,310 --> 00:03:58,590

and change this one two majors suite and fix the URLs majors suite



50

00:04:02,580 --> 00:04:05,340

generals quarters.



51

00:04:06,840 --> 00:04:09,880

OK, let's save that and just see how it looks.



52

00:04:09,900 --> 00:04:17,490

I'll have to Navarros when I refresh this page, but the second one should work and it does OK and I



53

00:04:17,490 --> 00:04:18,330

misspelled about it.



54

00:04:18,330 --> 00:04:19,380

So let's fix that.



55

00:04:21,000 --> 00:04:21,890

And what's next.



56

00:04:21,930 --> 00:04:26,730

We have search availability which is an item, so I'll just copy this one.



57

00:04:28,500 --> 00:04:29,760

Overwrite this one.



58

00:04:32,350 --> 00:04:42,550

And change that to search availability and the world is search availability, and I'll get rid of the



59

00:04:42,550 --> 00:04:47,500

search because we're not going to have that search availability.



60

00:04:47,530 --> 00:04:48,250

That's correct.



61

00:04:48,610 --> 00:04:52,690

And after that, we have what do we have after that contact?



62

00:05:00,710 --> 00:05:12,250

Contact becomes contact, and then we have this elai is authenticated, div class equals nav item.



63

00:05:12,500 --> 00:05:13,010

Yes.



64

00:05:13,280 --> 00:05:17,690

So we can just copy that entire elai and paste that right in here.



65

00:05:19,310 --> 00:05:21,630

And I think that's it, except for the color.



66

00:05:22,280 --> 00:05:23,930

So what's the color of this one?



67

00:05:24,800 --> 00:05:30,830

Navar Dark and Viji Dark Naver Dark and Viji Dark.



68

00:05:31,820 --> 00:05:39,080

And I should be able to comment this entire old nav bar out which starts right here and goes right down



69

00:05:39,080 --> 00:05:39,890

to here.



70

00:05:41,480 --> 00:05:46,570

And if I comment that out, save everything and go and reload this page.



71

00:05:47,510 --> 00:05:48,140

There it is.



72

00:05:48,590 --> 00:05:49,700

And rooms works.



73

00:05:50,900 --> 00:05:51,410

Yes.



74

00:05:51,750 --> 00:05:52,950

OK, so that part worked.



75

00:05:53,360 --> 00:05:56,240

Now the next part that we need to fix is this.



76

00:05:56,270 --> 00:05:58,700

This doesn't work anymore, our slider.



77

00:05:59,150 --> 00:06:00,800

So fortunately that one's pretty easy.



78

00:06:00,800 --> 00:06:06,140

So we'll just close this, open up our homepage, find the carousel.



79

00:06:06,140 --> 00:06:10,370

And all they've really done here is I need to add, if you'd read the documentation, you'll see this



80

00:06:10,520 --> 00:06:10,850

and all.



81

00:06:10,850 --> 00:06:15,410

You'll see you'll see that the only changes I need to put vs dash in after data.



82

00:06:15,410 --> 00:06:20,600

So I'll copy dashboards and put it everywhere.



83

00:06:20,600 --> 00:06:21,950

There's a data in here.



84

00:06:25,170 --> 00:06:26,940

And I think that's all we'll have to do.



85

00:06:29,580 --> 00:06:38,540

OK, any other BBSes now let's try that, reload this page and this should work down and it does.



86

00:06:39,390 --> 00:06:47,430

And there that's all that was required to update our site, our public facing site anyway, to use bootstrap



87

00:06:47,430 --> 00:06:51,520

five without jorquera instead of bootstrap for with query.



88

00:06:51,540 --> 00:06:57,900

And the minified JavaScript that's included with bootstrap five is considerably smaller than query.



89

00:06:57,910 --> 00:07:02,520

So actually our site will load a little faster and it's always good to try to keep things up to date



90

00:07:02,520 --> 00:07:04,460

with the latest versions whenever possible.



91

00:07:05,250 --> 00:07:10,470

As I said, I tend to avoid making anything that's a beta or even usually a DOT zero release.



92

00:07:10,470 --> 00:07:13,260

I wait until things have been all the little bugs have been ironed out.



93

00:07:13,270 --> 00:07:18,570

So when I actually upgrade any sites that I'm maintaining to bootstrap five, I'm probably going to



94

00:07:18,570 --> 00:07:21,900

wait for bootstrap five point zero point one or point two.



95

00:07:22,410 --> 00:07:28,410

But for this course, using the beta version just to demonstrate how to upgrade from bootstrap for to



96

00:07:28,410 --> 00:07:31,530

bootstrap five, no worries there whatsoever.