Bootstrap 5 Process Steps Example

<!-- Process 1 - Bootstrap Brain Component -->
<section class="py-3 py-md-5 py-xl-8">
  <div class="container">
    <div class="row gy-5 gy-lg-0 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="Our Design Process">
      </div>
      <div class="col-12 col-lg-6">
        <div class="row justify-content-xl-end">
          <div class="col-12 col-xl-11">
            <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 bsb-btn-circle pe-none me-4">1</span>
              </div>
              <div>
                <h4 class="mb-3">Planning</h4>
                <p class="mb-0 text-secondary">Get to know your users and their needs better through surveys, interviews, usability testing, and other methods.</p>
              </div>
            </div>
            <div class="d-flex mb-4">
              <div>
                <span class="btn btn-primary bsb-btn-circle pe-none me-4">2</span>
              </div>
              <div>
                <h4 class="mb-3">Launch</h4>
                <p class="mb-0 text-secondary">This involves creating wireframes, mockups, and prototypes to test out your ideas and get feedback from users.</p>
              </div>
            </div>
            <div class="d-flex">
              <div>
                <span class="btn btn-primary bsb-btn-circle pe-none me-4">3</span>
              </div>
              <div>
                <h4 class="mb-3">Finalize Product</h4>
                <p class="mb-0 text-secondary">Once your product is launched, it's important to gather feedback from users to learn what they like and dislike about it.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>