Create Fixed Bottom NavBar With Content

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

1. Above the jQuery comment at the bottom of the page, write the following code to create a NavBar with text and a button:
   
   

   <!-- Footer -------------------------------- -->
   <nav class="navbar-wrapper navbar-inverse navbar-fixed-bottom">
     <div class="container-fluid">
       <p class="navbar-text pull-left">&copy; 2015 by RMCS. All rights reserved.</p>
       <a href="#" class="btn navbar-btn btn-danger pull-right">Subscribe</a> 
     </div>
   </nav>
   <!-- jQuery (necessary for Bootstrap's JavaScript plug-ins) --> 
   <script src="js/jquery-1.11.2.min.js"></script>

   
   
   CODE EXPLANATION:
   - The pull-right class is similar to the navbar-right used earlier and is used to force the NavBar content to the right.
   - The navbar-fixed-bottom class is also similar to the navbar-fixed-top used earlier and is used to "fix" the NavBar to the bottom of the viewport.
   - The hash sign ("#") should be replaced later with a real file name.
   - The btn-danger class is used to style the button with a Bootstrap red color. Bootstrap's classes include:
   
   Default Primary Success Info Warning Danger
   
   TIP: It is best to remember these names as they are used for text, background, etc. as Bootstrap themes.
   
2. CHECK POINT: Save the file and test it in a browser. You should see the copyright notice on the left and the Subscribe button on the right in the footer. You will see later that the footer will stay at the bottom of the page once the page is scrolled.
   
   
   

Clear Footer

Because the NavBar's footer was given a class of navbar-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 test the page in a browser. You should see that the text appears above the navbar footer when scrolled all the way to the bottom.