<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- fontawsome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<div class="container mt-5 text-center">
  <div class="col-md-12 row ">
    <div class="col-md-4">
      <div class="card mt-4 ">
        <div class="card-body text-center">
          <i class="fa-solid fa-chart-line my-3"></i>
          <div class="underline">
            <h5 class="card-title">Chart Line</h5>
          </div>
          <p class="card-text px-5 py-3">Lorem ipsum dolor sit amet consectetur adipisicing elit Nam consectetur</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card mt-4 ">
        <div class="card-body text-center">
          <i class="fa-solid fa-bullhorn my-3"></i>
          <div class="underline">
            <h5 class="card-title">Quick Announcement</h5>
          </div>
          <p class="card-text px-5 py-3">Lorem ipsum dolor sit amet consectetur adipisicing elit Nam consectetur</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card mt-4 ">
        <div class="card-body text-center">
          <i class="fa-solid fa-map-location-dot my-3"></i>
          <div class="underline">
            <h5 class="card-title">Mark Location</h5>
          </div>
          <p class="card-text px-5 py-3">Lorem ipsum dolor sit amet consectetur adipisicing elit Nam consectetur</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card mt-4 ">
        <div class="card-body text-center">
          <i class="fa-solid fa-bug my-3"></i>
          <div class="underline">
            <h5 class="card-title">Bug Solution</h5>
          </div>
          <p class="card-text px-5 py-3">Lorem ipsum dolor sit amet consectetur adipisicing elit Nam consectetur</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card mt-4 ">
        <div class="card-body text-center">
          <i class="fa-solid fa-comments my-3"></i>
          <div class="underline">
            <h5 class="card-title">Fast Communication</h5>
          </div>
          <p class="card-text px-5 py-3">Lorem ipsum dolor sit amet consectetur adipisicing elit Nam consectetur</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card mt-4 ">
        <div class="card-body text-center">
          <i class="fa-solid fa-paintbrush my-3"></i>
          <div class="underline">
            <h5 class="card-title">Clean Design</h5>
          </div>
          <p class="card-text px-5 py-3">Lorem ipsum dolor sit amet consectetur adipisicing elit Nam consectetur</p>
        </div>
      </div>
    </div>
  </div>
</div>
body {
  background: #e8ebf0;
}

.card {
  background-color: white;
  border: none;
}

.card-body i {
  color: #f3b93e;
  font-size: 50px;
}

.border-bottom {
  width: 30%;
  text-align: center !important;
}

.underline {
  position: relative;
}

.underline:after {
  position: absolute;
  content: "";
  height: 2px;
  bottom: -12px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 22%;
  background: #aaaaac;
}
.card-text {
  color: #aaaaac;
}

<!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.