Learn

Congratulations! You’ve made it to the bottom of the webpage: the footer!

Footers display copyright information, social media links, and sometimes, site navigation.

Below is one possible implementation for a footer section using Bootstrap:

First, a footer element with Bootstrap’s container class is used:

<footer class="container"> </footer>

Inside the footer, a div with Bootstrap’s row class is added to hold footer content:

<footer class="container"> <div class="row"> ... </div> </footer>

Finally, the row is divided into parts using Bootstrap’s grid. Here is one suggestion:

<footer class="container"> <div class="row"> <p class="col-sm-4">...</p> <ul class="col-sm-8"> <li class="col-sm-1">...</li> <li class="col-sm-1">...</li> <li class="col-sm-1">...</li> </ul> </div> </footer>

Above, the row is broken into three parts: a p element that takes up four columns, a ul which takes up 8 columns, and li items which take up 1 column each. The lis could hold navigation menu items or social media icons.

Again, because the col-sm-... class is used, this layout will appear on tablet-width screens and wider. Screen sizes smaller than tablet-width (768 pixels), will not maintain this layout.

Now let’s write the code for your own footer!

Instructions

1.

Let’s create a footer. Below the supporting content’s closing </section> tag, create a footer element with the Bootstrap class container:

<footer class="container"> ... </footer>

Run your code to continue.

2.

Beneath the opening <footer class="container"> tag, create a div with the Bootstrap class row:

<footer class="container"> <div class="row"> ... </div> </footer>

Don’t forget your closing </div> tag! Run your code to continue.

3.

Next divide the row using Bootstrap’s grid.

Create a p element with the class col-sm-4 and <ul> element with the class col-sm-8:

<footer class="container"> <div class="row"> <p class="col-sm-4">...</p> <ul class="col-sm-8"> ... </ul> </div> </footer>

Run your code to continue.

4.

Between the <p class="col-sm-4"> and closing </p> add the website copyright:

&copy; 2016 Skillfair

&copy is a character code, which web browsers interpret as the copyright symbol: ©.

Run your code to view the copyright in the web browser.

5.

Between <ul class="col-sm-8"> and </ul>, create four li items. Each will have the class col-sm-1.

<ul class="col-sm-8"> <li class="col-sm-1">...</li> <li class="col-sm-1">...</li> <li class="col-sm-1">...</li> <li class="col-sm-1">...</li> </ul>

Run your code to continue.

6.

Finally, inside each <li class="col-sm-1">, add an img element that links to a social media icon.

Twitter

<li class="col-sm-1"> <img src="https://content.codecademy.com/projects/make-a-website/lesson-4/twitter.svg"> </li>

Facebook

<li class="col-sm-1"> <img src="https://content.codecademy.com/projects/make-a-website/lesson-4/facebook.svg"> </li>

Instagram

<li class="col-sm-1"> <img src="https://content.codecademy.com/projects/make-a-website/lesson-4/instagram.svg"> </li>

Medium

<li class="col-md-1"> <img src="https://content.codecademy.com/projects/make-a-website/lesson-4/medium.svg"> </li>

Run your code and view the results in the web browser.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?