Setup Footer

Create Navbar For Footer

The Navbar in the footer is similar to the one at the top of the page. See details under the Navbar in the main menu for classes already discussed.

1. Below the last closing </div> tag, write the following tags to create a Navbar with a copyright notice in it.
   
   

   </div>
   <!-- Footer -------------------------------- -->
   <nav style="color:white" class="navbar fixed-bottom navbar-expand-lg navbar-dark bg-dark">
   <div class="container-fluid">
     <p>&copy; 2017 by RMCS. All rights reserved.</p>
   </div>
   </nav>
   

   CODE EXPLANATION:
   - The fixed-bottom class is also similar to the fixed-top used earlier and is used to "fix" the Navbar to the bottom of the viewport.
   - The style="color:white" attribute was added so that the text can be seen better.
2. CHECK POINT: Save the file and preview it in a browser. You should see the copyright notice in the footer. If you scroll the page, you will see the footer remain in place.
   
   

Clear Footer

Because the Navbar's footer was given a class of fixed-bottom, some of the text at the bottom of the page get hidden behind it.

1. Open the custom_styles.css file and write the following CSS rule to create a margin at the bottom of the page to "push" other content away from the navbar footer.
   
   

   body{margin-bottom:80px;}

2. CHECK POINT: Save the CSS file and then preview the page in a browser. You should see that the text appears above the navbar footer when scrolled all the way to the bottom.