Now let's split this up into a header and a footer file in addition to index.php:

1. From the index.php file, we'll grab the code from the top down to the end of </nav>.
2. Let's create a new file called header.php. We will paste the code that we grabbed earlier and into this header file and save it.

3. In its place inside index.php, we'll open up a set of php tags using get_header():

      <?php get_header(); ?>
         <div class="container index">

Our page will look the exact same.

4. We'll then do the same thing with footer. We'll grab the code from this container down to the very bottom, from <div class="container"> till closing </html> tag:

      <div class="container">
         <hr>
         <footer>
            <p>&copy; 2017 WordStrap</p>
         </footer>
     </div>
     <script src="http://code.jquery.com/jquery-1.12.0.min.js">
     </script>
     <script src="<?php bloginfo('template_directory'); ?>
        /js/bootstrap.js">
     </script>
     </body>
     </html>

Create a footer file, paste the grabbed content, and save it.

5. In index.php we will add get_footer():

      <?php get_footer(); ?>

6. OK, now that should look the exact same. That cleans things up a little bit.