Bootstrap process snipp example v01
Whole html/css code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Team snipp</title>
<style>
.rounded img {
border-radius:0.6rem;
}
.bg-dot.primary {
background-image:radial-gradient(#3f78e0 2px, transparent 2.5px);
}
.shape.rellax {
z-index:1;
}
.shape.rellax {
position:absolute;
}
.bg-dot {
background-size:0.75rem 0.75rem;
}
.bg-dot, .bg-line {
opacity:.4;
}
.h-21 {
height:12.5rem !important;
}
.w-17 {
width:7rem !important;
}
.position-relative .shape.rellax+figure {
position:relative;
z-index:2;
}
.bg-soft-primary {
background-color:#f1f5fd !important;
}
.btn.btn-circle .number {
display:table-cell;
text-align:center;
margin:0 auto;
vertical-align:middle;
font-size:1.3rem;
font-weight:700;
}
.fs-18 {
font-size:1.2rem !important;
}
.btn.btn-circle {
padding: 0;
border-radius: 100% !important;
width: 2.6rem;
height: 2.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.rounded {
border-radius:0.6rem !important;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row gy-10 gy-sm-13 gx-lg-3 align-items-center">
<div class="col-md-8 col-lg-6 position-relative">
<div class="shape bg-dot primary rellax w-17 h-21" data-rellax-speed="1" style="top: -2rem; left: -1.9rem;"></div>
<div class="shape rounded bg-soft-primary rellax d-md-block" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
<figure class="rounded"><img src="https://bootstraplily.com/wp-content/uploads/2021/10/about7.jpg" alt="" /></figure>
</div>
<!--/column -->
<div class="col-lg-5 col-xl-4 offset-lg-1">
<h2 class="mb-3">How It Works?</h2>
<p class="lead mb-5">So here are three working steps why our valued customers choose us.</p>
<div class="d-flex flex-row mb-6">
<div> <span class="icon btn btn-circle btn-primary disabled me-5"><span class="number fs-18">1</span></span> </div>
<div>
<h5 class="mb-2">Collect Ideas</h5>
<p class="mb-4">Nulla vitae elit libero pharetra augue dapibus. Praesent commodo cursus.</p>
</div>
</div>
<div class="d-flex flex-row mb-6">
<div> <span class="icon btn btn-circle btn-primary disabled me-5"><span class="number fs-18">2</span></span> </div>
<div>
<h5 class="mb-2">Data Analysis</h5>
<p class="mb-4">Vivamus sagittis lacus vel augue laoreet. Etiam porta sem malesuada magna.</p>
</div>
</div>
<div class="d-flex flex-row">
<div> <span class="icon btn btn-circle btn-primary disabled me-5"><span class="number fs-18">3</span></span> </div>
<div>
<h5 class="mb-2">Finalize Product</h5>
<p class="mb-0">Cras mattis consectetur purus sit amet. Aenean lacinia bibendum nulla sed.</p>
</div>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</body>
</html>
jsfiddle example
