https://idea-hack.com/recipe/bootstrap-static-card-no-1/

Bootstrap Statics Card No.1

Statistics card No:1 using Simple line icon and Bootstrap 4

RECIPE

HTML
<!--Dependencies-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kosugi+Maru%7CQuicksand%3A600&display=swap&subset=cyrillic%2Cjapanese%2Clatin-ext%2Cvietnamese&ver=2.0.0.0" type="text/css"/>

<div class="bg-light container recipe-wrap">
  <div class="row">
      <div class="col-12 my-4">
        <div class="card">
          <div class="card-content">
            <div class="card-body">
              <div class="d-flex align-items-center justify-content-between">
                <div class="card-icon">
                  <i class="icon-question"></i>
                </div>
                <div class="card-text text-right">
                  <div class="statics-number">423</div>
                  <span>Total Visits</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
<div class="bg-light container recipe-wrap">
  <div class="row">
   <div class="col-12 my-4">
    <div class="card">
      <div class="card-content">
        <div class="card-body">
          <div class="d-flex align-items-center justify-content-between">
            <div class="card-text text-right">
              <div class="statics-number">423</div>
              <span>Total Visits</span>
            </div>
            <div class="card-icon">
              <i class="icon-question"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>
SCSS
.recipe-wrap {
    font-family: 'Quicksand', 'Kosugi Maru', sans-serif;
    line-height: 1.8;
  .card {
    .card-content {
      .card-body {
        .icon-question {
          font-size: 2rem;
        }
        .card-text {
          .statics-number {
            font-size: 2rem;
          }
        }
      }
    }
  }
}
CSS
.recipe-wrap {
  font-family: 'Quicksand', 'Kosugi Maru', sans-serif;
  line-height: 1.8;
}
.recipe-wrap .card .card-content .card-body .icon-question {
  font-size: 2rem;
}
.recipe-wrap .card .card-content .card-body .card-text .statics-number {
  font-size: 2rem;
}