Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Web Browser

Code Editor
Building with Bootstrap


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

Report a Bug
If you see a bug or any other issue with this page, please report it here.