title: How to keep footer at the bottom of the page when resizing on bootstrap
body: <p>I am designing my first website from scratch, and I am trying to learn everything all at once. I have figured most of it out, however, there are a couple things that I can not figure out whatsoever. 
    My question is this, how would I make my footer stick to the bottom of the page when resizing it smaller? I am working in bootstrap, and when I resize the page to small and medium, the footer gets pushed up, and away from where it should be. What am I doing wrong? </p>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt; Delightful Days Daycare&lt;/title&gt;
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  &lt;script src="https://use.fontawesome.com/b1366dc4f6.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  
  &lt;!-- Header --&gt;
    &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container-fluid background-box"&gt;
      &lt;div class="container background-box "&gt;
          &lt;div class="row"&gt;
                  &lt;div class="box-1 col-sm-12 col-md-6 col-lg-4"&gt;&lt;h2&gt;&lt;button class="button button1"&gt;&lt;a class="box-text" href="about-us.html"&gt;ABOUT US&lt;/button&gt;&lt;/a&gt;&lt;/h2&gt;&lt;img src="img/info.png" class="about-img"&gt;Learn more about Mrs. Chris and Delightful Days &lt;/div&gt;
                  &lt;div class="box-2 col-sm-12 col-md-6 col-lg-4"&gt;&lt;h2&gt;&lt;button class="button button2"&gt;&lt;a class="box-text" href="photos.html"&gt;PHOTOS&lt;/a&gt;&lt;/button&gt;&lt;/h3&gt;&lt;img src="img/photos.png" class="photos-img"&gt;View our photo gallery&lt;/div&gt;
                  &lt;div class="box-3 col-sm-12 col-md-6 col-lg-4"&gt;&lt;h2&gt;&lt;button class="button button3"&gt;&lt;a class="box-text" href="calendar.html"&gt;CALENDAR&lt;/a&gt;&lt;/button&gt;&lt;/h3&gt;&lt;img src="img/calendar.png" class="cal-img"&gt;Stay up to date with our official calendar to view holidays and closed days&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="box-4 col-sm-4 col-md-6 col-lg-4"&gt;&lt;h2&gt;&lt;button class="button button4"&gt;&lt;a class="box-text" href="contact-us.html"&gt;CONTACT US&lt;/a&gt;&lt;/button&gt;&lt;/h3&gt;
                      &lt;img src="img/phone.png" class="phone-img"&gt;Need to get in touch? View our contact page for more information &lt;/div&gt;
                  &lt;div class="box-5 col-sm-4 col-md-6 col-lg-4"&gt;&lt;h2&gt;&lt;button class="button button5"&gt;&lt;a class="box-text" href="openings.html"&gt;OPENINGS&lt;/a&gt;&lt;/h2&gt;&lt;/button&gt;
                      &lt;img src="img/open.png" class="open-img"&gt;View available openings &lt;/div&gt;
                  &lt;div class="box-6 col-sm-4 col-md-6 col-lg-4"&gt;&lt;h2&gt;&lt;button class="button button6"&gt;&lt;a class="box-text" href="pricing.html"&gt;PRICING&lt;/a&gt;&lt;/button&gt;&lt;/h3&gt;
                      &lt;img src="img/money.png" class="pricing-img"&gt;View our pricing page for more information&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;!-- Footer --&gt;
      &lt;div class="navbar navbar-default navbar-static-bottom"&gt;
          &lt;div class="container-fluid footer"&gt;
              &lt;div class="row"&gt;
                      &lt;div class="footer-1"&gt;
                          &lt;div class="col-sm-4 col-md-4 col-lg-4"&gt;&lt;/div&gt;
                          &lt;div class="col-sm-4 col-md-4 col-lg-4"&gt;
                              &lt;a href="https://facebook.com"&gt;&lt;i class="fa fa-facebook fa-4x" aria-hidden="true"&gt;&lt;/a&gt;&lt;/i&gt;
                              &lt;a href="https://yelp.com"&gt;&lt;i class="fa fa-yelp fa-4x" aria-hidden="true"&gt;&lt;/a&gt;&lt;/i&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-4 col-md-4 col-lg-4"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;div class="copyright"&gt;
                      &amp;#0169; 2016 DELIGHTFUL DAYS DAYCARE. ALL RIGHTS RESERVED
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>html,body {
      color: #8c8c8c;
      font-family: "source sans pro";
      font-style: normal;
      height: 100%;
  }
  
  .background-box{
      background-color: #4c4c4c;
      height: 1000.5px;
      color: white !important;
      font-size: 20px;
      text-align: center;
      position: auto;
      display: block;
      margin: auto;
  
  }
  
  
  .box-1{
      background-color: #FF3D7F;
      width: 330px;
      height: 394px;
      border-radius: 9px;
      /*margin-left: 181px;*/
      margin-top: 50px;
      margin: 2%;
  }
  
  .button{
      color: white;
      border:none;
      color: white;
      border-radius: 100px;
      height: 48px;
      width: 178px
  }
  
  .button1{
      background-color: #DB1759;
      text-align: center;
  }
  
  .button2{
      background-color: #C4C172;
  }
  .button3{
      background-color: #58A58B;
  }
  .button4{
      background-color: #B58C43;
  }
  .button5{
      background-color: #26978F;
  }
  .button6{
      background-color: #FF6362
  }
  .box-2{
      background-color: #DAD8A7;
      width: 330px;
      height: 394px;
      border-radius: 9px;
      /*margin-left: 44px;*/
      margin-top: 50px;
      margin: 2%;
  }
  
  .box-3{
      background-color: #7FC7AF;
      width: 330px;
      height: 394px;
      border-radius: 9px;
      /*margin-left: 44px;*/
      margin-top: 50px;
      margin: 2%;
  }
  
  .box-4{
      background-color: #D7B066;
      width: 330px;
      height: 394px;
      border-radius: 9px;
      /*margin-left: 181px;*/
      margin-top: 46px;
      margin: 2%;
  }
  
  .box-5{
      background-color: #3FB8AF;
      width: 330px;
      height: 394px;
      border-radius: 9px;
      /*margin-left: 44px;*/
      margin-top: 46px;
      margin: 2%;
  }
  
  
  .box-6{
      background-color: #FF9E9D;
      width: 330px;
      height: 394px;
      border-radius: 9px;
  
      /*margin-left: 44px;*/
      margin-top: 46px;
      margin: 2%;
  }
  .box-text{
      color: white;
         font-family: "Source Sans Pro";
     font-weight: 600;
     font-style: normal;
     font-size: 26px;
  }
  /*--------Box images------*/
  .about-img{
  padding-right: 102px;
  padding-left: 100px;
  padding-bottom: 38px;
  position: relative;
  padding-top: 43px;
  text-align: center;
  }
  
  
  .photos-img{
  padding-right: 112px;
  padding-left: 112px;
  padding-top: 66px;
  padding-bottom: 62px;
  }
  .cal-img{
  padding-right: 108px;
  padding-left: 109px;
  padding-top: 40px;
  padding-bottom: 36px;
  }
  
  .phone-img{
  padding-right: 109px;
  padding-left: 109px;
  padding-top: 60px;
  padding-bottom: 41px;   
  }
  .open-img{
  padding-right: 107px;
  padding-left: 108px;
  padding-top: 59px;
  padding-bottom: 63px;
  }
  
  .pricing-img{
  padding-right: 108px;
  padding-left: 109px;
  padding-top: 145px;
  padding-bottom: 136px;
  }
  .footer{
      position: relative;
      height: 150px;
      margin-top:;
  }
  
  .footer-1{
      height: 125px;
      padding-top: 36px;
      background: #FF9E9D;
      display: flex;
      text-align: center;
  }
  
  .copyright{
      background-color: #4c4c4c;
      height: auto;
      color: white;
      text-align: center;
      font-family: "source sans pro light";
      padding-top: 36px;
      padding-bottom: 33px;
  }
  .fa{
      color: white;
      margin-left: 40px;
      margin-right: 40px;
  }
  
  div.navbar.navbar-default.navbar-static-bottom{
      margin: 0;
  }
  </code></pre>