Bootstrap process snipp example v03
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>Bootstrap process snipp</title>
<style>
.card {
box-shadow: 0 0 0 .05rem rgba(8,60,130,.06),0 0 1.25rem rgba(30,34,40,.04);
border: 0;
}
.btn.btn-circle {
padding: 0;
border-radius: 100%!important;
width:3.2rem;
height:3.2rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.btn-soft-primary{
background-color:#e0e9fa !important;
color: #3f78e0;
}
.btn.btn-circle .number {
display:table-cell;
text-align:center;
margin:0 auto;
vertical-align:middle;
font-size:1.3rem;
font-weight:700;
}
.icon-img {
width: 2.8rem;
height: 2.8rem;
margin-bottom:20px;
}
</style>
</head>
<body>
<div class="container py-5 mt-5">
<div class="row mb-5">
<div class="col-md-10 mx-auto text-center">
<img src="https://bootstraplily.com/wp-content/uploads/2021/10/814848.png" class="icon-img mb-4" alt="" />
<h2 class="display-6 mb-4 px-lg-5">Here are 3 working steps to organize our business projects.</h2>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row gx-md-5 align-items-center">
<div class="col-lg-6 order-lg-2">
<div class="card me-lg-5">
<div class="card-body p-4">
<div class="d-flex flex-row">
<div>
<span class="btn btn-circle btn-soft-primary me-4"><span class="number">01</span></span>
</div>
<div>
<h5 class="mb-2">Collect Ideas</h5>
<p class="mb-0">Nulla vitae elit libero pharetra augue dapibus.</p>
</div>
</div>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
<div class="card ms-lg-5 mt-4">
<div class="card-body p-4">
<div class="d-flex flex-row">
<div>
<span class="btn btn-circle btn-soft-primary me-4"><span class="number">02</span></span>
</div>
<div>
<h5 class="mb-2">Data Analysis</h5>
<p class="mb-0">Vivamus sagittis lacus vel augue laoreet.</p>
</div>
</div>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
<div class="card mx-lg-4 mt-4">
<div class="card-body p-4">
<div class="d-flex flex-row">
<div>
<span class="btn btn-circle btn-soft-primary me-4"><span class="number">03</span></span>
</div>
<div>
<h5 class="mb-2">Finalize Product</h5>
<p class="mb-0">Cras mattis consectetur purus sit amet.</p>
</div>
</div>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-lg-6">
<h2 class="display-6 mb-4">How It Works?</h2>
<p class="lead pb-3">Find out everything you need to know and more about how we create our business process models.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare.</p>
<p class="mb-5">Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis.</p>
<a href="#" class="btn btn-primary rounded-pill mb-0 px-4">Learn More</a>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</body>
</html>
jsfiddle example
