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.