xErik/components>footer>footer.component.html

## components>footer>footer.component.html
<!-- create this file via: ng generate component footer -->

<footer class="bg-dark text-white mt-4">
  <div class="container-fluid py-3">
    <div class="row">
      <div class="col-md-3">
        <h5>Footer</h5></div>
      <div class="col-md-3"></div>
      <div class="col-md-3"></div>
      <div class="col-md-3"></div>
    </div>
    <div class="row">
      <div class="col-md-6">I stay at the bottom of the viewport! <span class="small"><br>Unless the page content pushes me further.</span></div>
      <div class="col-md-3"></div>
      <div class="col-md-3 text-right small align-self-end">©2017 Brand, Inc.</div>
    </div>
  </div>
</footer>

## src>app>app.component.html
<app-header></app-header>
  <section class="container">
    <router-outlet></router-outlet>
  </section>
<app-footer class="mt-auto"></app-footer>

## src>index.html
<!DOCTYPE html>
<html lang="en" class="h-100">
  <head>
  <!-- bla -->
  </head>

  <body class="h-100">
    <app-root class="d-flex flex-column h-100"></app-root>
    <noscript
      >Please enable JavaScript to continue using this application.</noscript
    >
  </body>
</html>
	<app-header></app-header>
	<section class="container">
	<router-outlet></router-outlet>
	</section>
	<app-footer class="mt-auto"></app-footer>
	<!DOCTYPE html>
	<html lang="en" class="h-100">
	<head>
	<!-- bla -->
	</head>

	<body class="h-100">
	<app-root class="d-flex flex-column h-100"></app-root>
	<noscript
	>Please enable JavaScript to continue using this application.</noscript
	>
	</body>
	</html>