<div class="jack-wrap">
  <main class="flex-shrink-0">
    <section class="d-flex flex-column justify-content-between watermark-top-section" id="hero">
      <div id="hero-top">
        <nav class="navbar navbar-light navbar-expand-md">
          <div class="container-fluid"><a class="navbar-brand" href="#"> </a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
              <ul class="nav navbar-nav mx-auto">
                <li class="nav-item" role="presentation"><a class="nav-link active" href="#">Model S</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Model X</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Model 3</a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Roadster </a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Energy </a></li>
              </ul>
              <ul class="nav navbar-nav">
                <li class="nav-item" role="presentation"><a class="nav-link active" href="#">Shop </a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" href="#">Sign In</a></li>
              </ul>
            </div>
          </div>
        </nav>
        <h1 class="text-center aos-init aos-animate" data-aos="fade-up" data-aos-duration="700" data-aos-once="true" id="title">Tesla </h1>
        <h2 class="text-center aos-init aos-animate" data-aos="fade-up" data-aos-duration="700" data-aos-once="true" id="subtitle">Roadster </h2>
      </div>
      <div id="hero-bottom">
        <div class="container">
          <div class="row">
            <div class="col-8 offset-2">
              <p>​The quickest car in the world, with record-setting acceleration, range and performance. </p>
            </div>
          </div>
          <div class="row">
            <div class="col aos-init aos-animate" data-aos="fade-up" data-aos-delay="400">
              <p class="p-top"><i class="icon ion-speedometer"></i> 1.9s </p>
              <p class="p-bot">0-60 mph </p>
            </div>
            <div class="col with-borders aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
              <p class="p-top">+250mph </p>
              <p class="p-bot">Top Speed</p>
            </div>
            <div class="col aos-init aos-animate" data-aos="fade-up" data-aos-delay="600">
              <p class="p-top">620mi </p>
              <p class="p-bot">Mile Range</p>
            </div>
            <div class="col align-self-center aos-init aos-animate" data-aos="fade-up" data-aos-offset="100px" data-aos-delay="700"><button class="btn btn-primary btn-block reserve-button" type="button">Reserve Now</button></div>
          </div>
          <div class="row">
            <div class="col"><button class="btn btn-link btn-block arrow-button" type="button"><i class="icon ion-ios-arrow-down"></i></button></div>
          </div>
        </div>
      </div>
    </section>
    content
  </main>
  <footer class="footer pb-3 mt-auto watermark-footer">
    <div class="container-fluid">
      <div class="row text-center text-sm-left align-items-sm-center">
        <div class="col-sm-3">
          <p class="text-sm mb-0">im a sticky footer</p>
        </div>
        <div class="col-sm-9 text-right"></div>
      </div>
    </div>
  </footer>
</div>

html,
body {
  /* height: 100%;*/
}
body {
  display: flex !important;
  flex-direction: column !important;
}
.watermark-top-section {
  position: relative;
  /* height: 100vh;*/
  /*min-height: 25rem;*/
  /*width: 100%;*/
  overflow: hidden;
  background: red;
  flex: 1 0 0%;
}
.jack-wrap {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.jack-wrap > main {
  flex: 1 0 0%;
  display: flex;
  flex-direction: column;
}

.footer {
  background: green;
}