Bootstrap 5 Process Steps Example

<!-- Process 1 - Bootstrap Brain Component -->
<section class="bg-light py-5 py-xl-8">
  <div class="container">
    <div class="row gy-5 gy-lg-0 gx-lg-6 gx-xxl-8 align-items-lg-center">
      <div class="col-12 col-lg-6">
        <img class="img-fluid rounded" loading="lazy" src="./assets/img/process-img-1.png" alt="">
      </div>
      <div class="col-12 col-lg-6">
        <h2 class="h1 mb-3">Our Design Process</h2>
        <p class="lead fs-4 text-secondary mb-5">Our design approach is very organized to ensure satisfaction for our esteemed clients.</p>
        <div class="d-flex mb-4">
          <div>
            <span class="btn btn-primary btn-circle pe-none me-4">1</span>
          </div>
          <div>
            <h4 class="mb-3">Planning</h4>
            <p class="mb-0 text-secondary">Etiam facilisis, erat ac ullamcorper dictum, nulla erat pretium erat, ac tempus ligula sem ac erat.</p>
          </div>
        </div>
        <div class="d-flex mb-4">
          <div>
            <span class="btn btn-primary btn-circle pe-none me-4">2</span>
          </div>
          <div>
            <h4 class="mb-3">Launch</h4>
            <p class="mb-0 text-secondary">Etiam facilisis, erat ac ullamcorper dictum, nulla erat pretium erat, ac tempus ligula sem ac erat.</p>
          </div>
        </div>
        <div class="d-flex">
          <div>
            <span class="btn btn-primary btn-circle pe-none me-4">3</span>
          </div>
          <div>
            <h4 class="mb-3">Finalize Product</h4>
            <p class="mb-0 text-secondary">Etiam facilisis, erat ac ullamcorper dictum, nulla erat pretium erat, ac tempus ligula sem ac erat.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>