Checkout Progress - Bootstrap 4

checkout-progress.html

<!--
Supports "any" number of steps
Example: https://codepen.io/romulo1984/pen/OvXpvB
-->
<div class="d-flex justify-content-between checkout-progress align-items-center">
    <div class="checkout-progress-item">
        <div class="checkout-progress-point"></div>
        <h5 class="mt-2 text-uppercase">Step 1</h5>
    </div>
    <div class="checkout-progress-item current">
        <div class="checkout-progress-point"></div>
        <h5 class="mt-2 text-uppercase">Step 2</h5>
    </div>
    <div class="checkout-progress-item">
        <div class="checkout-progress-point"></div>
        <h5 class="mt-2 text-uppercase">Step 3</h5>
    </div>
</div>

checkout-progress.scss

$active-color: #000;
$inactive-color: #ccc;

.checkout-progress {
  overflow: hidden;
  position: relative;

  &::before {
    position: absolute;
    content: "";
    height: 6px;
    background-color: $active-color;
    top: 30px;
    left: 30px;
    right: 30px;
    margin-top: -3px;
    z-index: 1;
  }

  .current ~ .checkout-progress-item {
    .checkout-progress-point {
      background-color: $inactive-color;
    }
  }

  .checkout-progress-item {
    text-align: center;
    z-index: 2;
    h5 {
      color: $inactive-color;
      font-size: 16px;
    }

    &.current {
      .checkout-progress-point {
        position: relative;

        &:before {
          position: absolute;
          content: "";
          width: 40px;
          height: 40px;
          border: 5px solid #fff;
          border-radius: 50%;
          left: 50%;
          top: 10px;
          margin: 0 auto;
          margin-left: -20px;
        }
      }

      &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 6px;
        background-color: $inactive-color;
        top: 30px;
        margin-top: -3px;
      }
      &::after {
        position: absolute;
        content: "";
        width: 30px;
        height: 6px;
        background-color: #fff;
        top: 30px;
        right: 0;
        margin-top: -3px;
        z-index: 2;
      }
    }
  }

  .checkout-progress-point {
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: $active-color;
    z-index: 3;
  }
}