A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements. It is placed at the bottom of your website.

Footers can hold multiple different components. Let's go through the most popular ones one by one.


Footer can also be very simple with no link, only copyrights information, so you won't distract users.


You can put a grid inside Footer and create several columns with links.


We can easily add text to the footer:


The same thing can be done with icons:

Note: Footers have many options available. If you want to know more about them, read the footer documentation page.

Step 1 - create footer and add it to the project

Using the knowledge above, let's create a footer containing copyrights, links, text and icons.

We will not go into details here, because each of the elements and functionalities used in the footer has already been discussed in this and previous lessons.

Of course, you can adjust the Footer to your needs or even create your own Footer from scratch. Everything is up to you.

Add <footer> below <main> section in your project:

Note: You can also try our Footer generator.

John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.