How to create a fixed footer in HTML and CSS

I have created a fixed footer for my website:

HTML

<div class="card footerBF">
  <div class="card-body space-around">
    <button
      type="button"
      class="buttonBF"
      routerLink="/myRouter"
    >
      <i class="fa fa-lock fa-lg"></i>
    </button>
    <button
      type="button"
      class="buttonBF"
      routerLink="myRouter"
    >
      <i class="fa fa-globe fa-lg"></i>
    </button>
    <button type="button" class="buttonBF" routerLink="myRoute">
      <i class="fa fa-plus fa-lg"></i>
    </button>
    <button
      type="button"
      class="buttonBF"
      routerLink="myRouter"
    >
      <i class="fa fa-home fa-lg"></i>
    </button>
  </div>
</div>

CSS

.footerBF {
  background-color: white;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 1em;
}

.buttonBF {
  background-color: white;
  color: grey;
  display: inline-block;
  border: none;
  cursor: pointer;
}

The problem is that when I scroll, my footer moves, even though is supposed to be fixed. I attach one picture to show this effect:

Solution

There are Bootstrap UI elements for the a fixed bottom navbar, each with props to do this... check out Fixed bottom

<nav class="navbar fixed-bottom">
  // Buttons
</nav>

However, if you want your current code from the question to work as intended. I'd just set the footer with display: flex, give it a height and justify-content and align-items center.

body {
  background: black;
  height: 2000px;
}

.footerBF {
  background-color: white;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 1em;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #f1f1f1;
}

button {
  background-color: white;
  border: none;
  cursor: pointer;
}

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />

<body>
  <div class="card footerBF">
    <div class="card-body">
      <button type="button">
      <i class="fa fa-lock fa-lg"></i>
    </button>
      <button type="button">
      <i class="fa fa-globe fa-lg"></i>
    </button>
      <button type="button">
      <i class="fa fa-plus fa-lg"></i>
    </button>
      <button type="button">
      <i class="fa fa-home fa-lg"></i>
    </button>
    </div>
  </div>
</body>