Icon box

<!-- Basic icon box -->
<div class="text-start">
  <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
  <h3 class="h5 mb-2">E-commerce Websites</h3>
  <p class="mb-0 text-muted">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
</div>

<!-- Center alignment -->
<div class="text-center">
  <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
  <h3 class="h5 mb-2">E-commerce Websites</h3>
  <p class="mb-0 text-muted">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
</div>

<!-- Right alignment -->
<div class="text-end">
  <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
  <h3 class="h5 mb-2">Content-rich Websites</h3>
  <p class="mb-0 text-muted">Culpa nostrud commodo ea consequat reprehenderit aliquip.</p>
</div>

<!-- Basic icon box -->
<div class="text-center">
  <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
  <h3 class="h5 mb-2 text-white">E-commerce Websites</h3>
  <p class="mb-0 text-white opacity-60">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
</div>

<!-- Icon box grid: 3 columns (with dividers) -->
<div class="container">
  <div class="row g-0">
    <div class="col-sm-4">
      <div class="text-center mb-sm-0 mb-grid-gutter">
        <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
        <h3 class="h5 mb-2">E-commerce Websites</h3>
        <p class="mb-0 text-muted">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
      </div>
    </div>
    <span class="divider-vertical d-sm-block d-none"></span>
    <div class="col-sm-4">
      <div class="text-center mb-sm-0 mb-grid-gutter">
        <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
        <h3 class="h5 mb-2">Content-rich Websites</h3>
        <p class="mb-0 text-muted">Culpa nostrud commodo ea consequat reprehenderit aliquip. </p>
      </div>
    </div>
    <span class="divider-vertical d-sm-block d-none"></span>
    <div class="col-sm-4">
      <div class="text-center">
        <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
        <h3 class="h5 mb-2">B2B /B2C Services</h3>
        <p class="mb-0 text-muted">Viverra scelerisque consequat net. Adipisicing esse consequat. </p>
      </div>
    </div>
  </div>
</div>

<!-- Card: border -->
<div class="card card-hover text-center">
  <div class="card-body">
    <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
    <h3 class="h5 mb-2">E-commerce Websites</h3>
    <p class="mb-0 text-muted">Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.</p>
  </div>
</div>

<!-- Card: shadow -->
<div class="card border-0 shadow card-hover text-center">
  <div class="card-body">
    <img class="mb-4" src="path-to-image" width="48" alt="Icon box image">
    <h3 class="h5 mb-2">Content-rich Websites</h3>
    <p class="mb-0 text-muted">Culpa nostrud commodo ea consequat reprehenderit aliquip.</p>
  </div>
</div>

<!-- Statistic icon box -->
<div class="text-center">
  <img class="mb-3" src="path-to-image" width="48" alt="Icon box image">
  <h3 class="h5 mb-2 pt-1 text-primary" style="font-size: 2.875rem">60%</h3>
  <p class="mb-0 fs-sm text-dark">Clients on the recommendation of friends</p>
</div>