<!-- Left aligned pagination start -->
<div class="pagination pagination--left">
  <a class="prev page-numbers" href="#">
    <i class="fas fa-angle-left"></i>
  </a>
  <span aria-current="page" class="page-numbers current">1</span>
  <a class="page-numbers" href="#">2</a>
  <a class="page-numbers" href="#">3</a>
  <a class="page-numbers" href="#">4</a>
  <a class="page-numbers" href="#">5</a>
  <a class="next page-numbers" href="#">
    <i class="fas fa-angle-right"></i>
  </a>
</div>
<!-- Left aligned pagination end -->
<!-- Center aligned pagination start -->
<div class="pagination pagination--center">
  <a class="prev page-numbers" href="#">
    <i class="fas fa-angle-left"></i>
  </a>
  <span aria-current="page" class="page-numbers current">1</span>
  <a class="page-numbers" href="#">2</a>
  <a class="page-numbers" href="#">3</a>
  <a class="page-numbers" href="#">4</a>
  <a class="page-numbers" href="#">5</a>
  <a class="next page-numbers" href="#">
    <i class="fas fa-angle-right"></i>
  </a>
</div>
<!-- Center aligned pagination end -->
<!-- Right aligned pagination start -->
<div class="pagination pagination--right">
  <a class="prev page-numbers" href="#">
    <i class="fas fa-angle-left"></i>
  </a>
  <span aria-current="page" class="page-numbers current">1</span>
  <a class="page-numbers" href="#">2</a>
  <a class="page-numbers" href="#">3</a>
  <a class="page-numbers" href="#">4</a>
  <a class="page-numbers" href="#">5</a>
  <a class="next page-numbers" href="#">
    <i class="fas fa-angle-right"></i>
  </a>
</div>
<!-- Center aligned pagination end -->

<!-- Instructions -->
<div class="description" style="text-align:center; font-size: 18px; color: #FD9D14;">
  <p>Just change the class name "pagination--left" or "pagination--center" or "pagination--right" to change the alignment.</p>
</div>

html {
  font-size: 14px;
  font-family: 'Rajdhani', sans-serif;
}
.pagination {
  display: flex;
  .page-numbers {
    text-align: center;
    padding: .6rem;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.9;
    margin: 0.3rem;
    border: 1px solid #f4f6fa;
    background: #f4f6fa;
    @media(max-width: 480px) {
      width: 2rem;
      height: 2rem;
      font-size: 1rem;
      padding: 0.5rem;
    }
    &.current {
      color: #fff;
      background: #00AAF1;
    }
    i {
      font-size: 1em;
      line-height: 0.8em;
    }
  }
  a {
    color: #000;
    text-decoration: none;
    transition: all 0.4s;
    &:hover {
      color: #fff;
      background: #00AAF1;
    }
  }
  &.pagination--left {
  justify-content: flex-start;
  }
  &.pagination--center {
  justify-content: center;
  }
  &.pagination--right {
  justify-content: flex-end;
  }
}