zenkbaries/sticky_footer.css

## sticky_footer.css
/* Sticky Footer Classes */

html,
body {
  height: 100%;
}

#page-content {
  flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: none;
}

/* Other Classes for Page Styling */

body {
  background: #007bff;
  background: linear-gradient(to right, #0062E6, #33AEFF);
}

## sticky_footer.html
<body class="d-flex flex-column">
  <div id="page-content">
    <div class="container text-center">
      <div class="row justify-content-center">
        <div class="col-md-7">
          <h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
          <p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will have a flexbox enabled sticky footer for your website!</p>
        </div>
      </div>
    </div>
  </div>
  <footer id="sticky-footer" class="py-4 bg-dark text-white-50">
    <div class="container text-center">
      <small>Copyright &copy; Your Website</small>
    </div>
  </footer>
</body>
	/* Sticky Footer Classes */

	html,
	body {
	height: 100%;
	}

	#page-content {
	flex: 1 0 auto;
	}

	#sticky-footer {
	flex-shrink: none;
	}

	/* Other Classes for Page Styling */

	body {
	background: #007bff;
	background: linear-gradient(to right, #0062E6, #33AEFF);
	}
	<body class="d-flex flex-column">
	<div id="page-content">
	<div class="container text-center">
	<div class="row justify-content-center">
	<div class="col-md-7">
	<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
	<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will have a flexbox enabled sticky footer for your website!</p>
	</div>
	</div>
	</div>
	</div>
	<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
	<div class="container text-center">
	<small>Copyright © Your Website</small>
	</div>
	</footer>
	</body>