1
00:00:04,010 --> 00:00:06,340
Hello everyone and welcome back to our bootstrap course.

2
00:00:06,350 --> 00:00:10,670
In this lecture we're gonna be adding a foot or so we have our contact form here and we built it mobile

3
00:00:10,670 --> 00:00:15,020
first and just below the contact form you'll see that we just have this empty white space.

4
00:00:15,020 --> 00:00:20,300
So we're going gonna add a quick footer to let the user know that they've reached the end of the site.

5
00:00:20,300 --> 00:00:21,670
Let's go ahead and toggle the outputs.

6
00:00:21,670 --> 00:00:27,260
We can see more of this code and just scroll down here to the bottom of the page where we have our footer

7
00:00:27,470 --> 00:00:29,490
tag set up but we just don't have anything inside.

8
00:00:29,490 --> 00:00:33,890
So let's go ahead and add some stuff first we can add a class that uses the container.

9
00:00:33,890 --> 00:00:39,500
So the class container is a bootstrap class that will put all of your elements into a container with

10
00:00:39,500 --> 00:00:40,800
a bit of padding.

11
00:00:40,820 --> 00:00:46,100
You can also open a paragraph and we can float this to the right by using the class float right.

12
00:00:46,100 --> 00:00:51,520
And that means all this text will float to the right so it will be on the right of the screen.

13
00:00:51,830 --> 00:00:55,130
And in here we can put in a link.

14
00:00:55,130 --> 00:01:01,550
So forces close off this paragraph tag and in here we're going to put in a link that will link back

15
00:01:01,550 --> 00:01:04,870
to the top of the Web site.

16
00:01:04,880 --> 00:01:11,910
So you have often seen it back to top arrows or text at the bottom of a website.

17
00:01:12,200 --> 00:01:13,240
And that's all we're going to add here.

18
00:01:13,250 --> 00:01:18,760
So we're gonna write back to top and when the user clicks on this they'll go to this hashtag reference

19
00:01:18,770 --> 00:01:21,470
which will just link them back to the home page.

20
00:01:21,470 --> 00:01:29,720
So the top of the screen and we can close off that paragraph tag perfect and let's add another paragraph

21
00:01:29,720 --> 00:01:30,080
tag.

22
00:01:30,080 --> 00:01:33,890
This one will contain a copyright symbol with the company's name.

23
00:01:33,890 --> 00:01:38,400
So that way we can say that the website is copyrighted to that company.

24
00:01:38,480 --> 00:01:46,280
So to add a copyright symbol you can add this text which will automatically be translated into a copyright

25
00:01:46,280 --> 00:01:48,680
symbol as well as company name.

26
00:01:48,680 --> 00:01:54,950
So and copy semicolon will make a copyright symbol followed by the company name will just be the text

27
00:01:54,950 --> 00:01:58,160
itself and we can close off that paragraph tag as well.

28
00:01:58,520 --> 00:02:01,110
So that is all we need for a basic footer.

29
00:02:01,160 --> 00:02:07,700
Oftentimes you'll also see people adding in navigation back into the footer but because our navigation

30
00:02:07,700 --> 00:02:12,800
is fixed we don't need to add navigation into the footer because our navigation is still on the screen

31
00:02:12,820 --> 00:02:13,680
anyway.

32
00:02:13,850 --> 00:02:15,990
Let's go ahead and test how this footer looks.

33
00:02:16,100 --> 00:02:19,130
So I'm going to click on the output and scroll all the way down.

34
00:02:19,250 --> 00:02:22,850
And as you'll see we have the copyright symbol company name.

35
00:02:22,860 --> 00:02:26,950
And back to top which will jump you back to the top of the Web site.

36
00:02:26,990 --> 00:02:33,030
I mean I toggle ECMO tabs so that way you'll be able to see em zoom out a little bit.

37
00:02:33,140 --> 00:02:36,400
This little geo spin notification is hiding this back to top.

38
00:02:36,410 --> 00:02:38,000
But as you can see there it is.

39
00:02:38,000 --> 00:02:38,230
OK.

40
00:02:38,240 --> 00:02:42,380
I'm zooming out a bit now you can see this back to Top button and you can see it's styled automatically

41
00:02:42,380 --> 00:02:45,020
with this blue bootstrap color.

42
00:02:45,020 --> 00:02:51,110
And we have the copyright symbol here which was translated with our key text.

43
00:02:51,320 --> 00:02:51,560
OK.

44
00:02:51,590 --> 00:02:53,660
So that is all we need for the footer.

45
00:02:53,660 --> 00:02:59,330
You can also add in a different color for the footer if you'd like.

46
00:02:59,330 --> 00:03:05,420
I challenge you to do that so that you can practice adding perhaps the same color as the header but

47
00:03:05,420 --> 00:03:07,160
other than that that is all that we need.

48
00:03:07,160 --> 00:03:15,500
So far we have our navigation our main page as well as functional buttons and a functional Carousel

49
00:03:16,070 --> 00:03:23,600
and even a contact form which you can put in information hit send and then you have a footer.

50
00:03:23,600 --> 00:03:26,840
Congratulations on making it this far.

51
00:03:26,840 --> 00:03:32,840
Now this this contact form is not functional yet in the sense that you can't send messages.

52
00:03:32,880 --> 00:03:36,470
That's because that would require P2P and javascript.

53
00:03:36,620 --> 00:03:42,050
So that would cause more back and work and that would be not front end work anymore.

54
00:03:42,060 --> 00:03:44,140
So that's why we're not going to fill in the contact form.

55
00:03:44,150 --> 00:03:47,390
But other than that you do have the styling for the contact form which is great.

56
00:03:47,390 --> 00:03:50,270
Thank you all for watching and we are going to see you in the next lecture.