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 li
s 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
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.
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.
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.
Between the <p class="col-sm-4">
and closing </p>
add the website copyright:
© 2016 Skillfair
©
is a character code, which web browsers interpret as the copyright symbol: ©.
Run your code to view the copyright in the web browser.
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.
Finally, inside each <li class="col-sm-1">
, add an img element
that links to a social media icon.
<li class="col-sm-1"> <img src="https://content.codecademy.com/projects/make-a-website/lesson-4/twitter.svg"> </li>
<li class="col-sm-1"> <img src="https://content.codecademy.com/projects/make-a-website/lesson-4/facebook.svg"> </li>
<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.