Hello everyone and welcome back to our bootstrap course.
In this lecture we're gonna be adding a foot or so we have our contact form here and we built it mobile
first and just below the contact form you'll see that we just have this empty white space.
So we're going gonna add a quick footer to let the user know that they've reached the end of the site.
Let's go ahead and toggle the outputs.
We can see more of this code and just scroll down here to the bottom of the page where we have our footer
tag set up but we just don't have anything inside.
So let's go ahead and add some stuff first we can add a class that uses the container.
So the class container is a bootstrap class that will put all of your elements into a container with
a bit of padding.
You can also open a paragraph and we can float this to the right by using the class float right.
And that means all this text will float to the right so it will be on the right of the screen.
And in here we can put in a link.
So forces close off this paragraph tag and in here we're going to put in a link that will link back
to the top of the Web site.
So you have often seen it back to top arrows or text at the bottom of a website.
And that's all we're going to add here.
So we're gonna write back to top and when the user clicks on this they'll go to this hashtag reference
which will just link them back to the home page.
So the top of the screen and we can close off that paragraph tag perfect and let's add another paragraph
tag.
This one will contain a copyright symbol with the company's name.
So that way we can say that the website is copyrighted to that company.
So to add a copyright symbol you can add this text which will automatically be translated into a copyright
symbol as well as company name.
So and copy semicolon will make a copyright symbol followed by the company name will just be the text
itself and we can close off that paragraph tag as well.
So that is all we need for a basic footer.
Oftentimes you'll also see people adding in navigation back into the footer but because our navigation
is fixed we don't need to add navigation into the footer because our navigation is still on the screen
anyway.
Let's go ahead and test how this footer looks.
So I'm going to click on the output and scroll all the way down.
And as you'll see we have the copyright symbol company name.
And back to top which will jump you back to the top of the Web site.
I mean I toggle ECMO tabs so that way you'll be able to see em zoom out a little bit.
This little geo spin notification is hiding this back to top.
But as you can see there it is.
OK.
I'm zooming out a bit now you can see this back to Top button and you can see it's styled automatically
with this blue bootstrap color.
And we have the copyright symbol here which was translated with our key text.
OK.
So that is all we need for the footer.
You can also add in a different color for the footer if you'd like.
I challenge you to do that so that you can practice adding perhaps the same color as the header but
other than that that is all that we need.
So far we have our navigation our main page as well as functional buttons and a functional Carousel
and even a contact form which you can put in information hit send and then you have a footer.
Congratulations on making it this far.
Now this this contact form is not functional yet in the sense that you can't send messages.
That's because that would require P2P and javascript.
So that would cause more back and work and that would be not front end work anymore.
So that's why we're not going to fill in the contact form.
But other than that you do have the styling for the contact form which is great.
Thank you all for watching and we are going to see you in the next lecture.