Bootstrap process snipp example v04
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>
.icon-img {
width: 2.8rem;
height: 2.8rem;
margin-bottom:20px;
}
.bg-dot.red {
background-image: radial-gradient(#e2626b 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-18 {
height: 8rem !important;
}
.w-16 {
width: 6rem !important;
}
.bg-line.primary {
background: repeating-linear-gradient(-55deg,rgba(255,255,255,0) 0.8px,#3f78e0 1.6px,#3f78e0 3px,rgba(255,255,255,0) 3.8px,rgba(255,255,255,0) 10px);
}
.rounded-circle {
border-radius: 50% !important;
}
.w-18 {
width: 8rem !important;
}
.plyr {
position: relative;
z-index: 2;
}
</style>
</head>
<body>
<div class="container py-5 my-5">
<div class="row text-center">
<div class="col-lg-10 mx-auto">
<div class="position-relative">
<div class="shape bg-dot red rellax w-16 h-18" data-rellax-speed="1" style="top: 1rem; left: -3.9rem;"></div>
<div class="shape rounded-circle bg-line primary rellax w-18 h-18" data-rellax-speed="1" style="bottom: 2rem; right: -3rem;"></div>
<div class="ratio ratio-16x9 plyr">
<iframe src="https://www.youtube.com/embed/h3M7J60FUbM?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row text-center">
<div class="col-lg-9 mx-auto">
<h6 class="text-uppercase text-muted mb-3 mt-5">Our Process</h6>
<h3 class="display-6 mb-0 text-center">Find out everything you need to know about creating a business process model</h3>
<div class="row gx-5 text-center mt-5">
<div class="col-md-4"> <img src="https://bootstraplily.com/wp-content/uploads/2021/10/814848.png" class="icon-img mb-4" alt="" />
<h4 class="mb-3">1. Concept</h4>
<p class="mb-0">Nulla vitae elit libero elit non porta gravida eget metus cras.</p>
</div>
<!--/column -->
<div class="col-md-4 mt-4 mt-md-0"> <img src="https://bootstraplily.com/wp-content/uploads/2021/10/814812.png" class="icon-img mb-4" alt="" />
<h4 class="mb-3">2. Prepare</h4>
<p class="mb-0">Nulla vitae elit libero elit non porta gravida eget metus cras.</p>
</div>
<!--/column -->
<div class="col-md-4 mt-4 mt-md-0"> <img src="https://bootstraplily.com/wp-content/uploads/2021/10/814817.png" class="icon-img mb-4" alt="" />
<h4 class="mb-3">3. Retouch</h4>
<p class="mb-0">Nulla vitae elit libero elit non porta gravida eget metus cras.</p>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
</body>
</html>
jsfiddle example
