Bootstrap Process 1 Section

How to use this Bootstrap snippet
Our Design Process

Our Design Process

Our design approach is very organized to ensure satisfaction for our esteemed clients.

1

Planning

Get to know your users and their needs better through surveys, interviews, usability testing, and other methods.

2

Launch

This involves creating wireframes, mockups, and prototypes to test out your ideas and get feedback from users.

3

Finalize Product

Once your product is launched, it's important to gather feedback from users to learn what they like and dislike about it.

How to use this Bootstrap Process 1 Section

Place the code in the <body> for Interface 
          
<!-- 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>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/processes/process-1/assets/css/process-1.css">

This Bootstrap 5 process steps snippet is modern and responsive. You can elaborate on any process with this example in an elegant way. The interface of this snippet contains a bright image, an appealing heading, and a process hierarchy.