Skip to Content
Learn
Building with Bootstrap
Footers

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.

Folder Icon

Take this course for free

Already have an account?