Bootstrap five html team 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>Testimonial snipp</title>
<style>
.shape.rellax {
position: absolute;
}
.card {
box-shadow: 0 0 0 0.05rem rgb(8 60 130 / 6%), 0 0 1.25rem rgb(30 34 40 / 4%);
border: 0;
border-radius:0.4rem !important;
}
.card-img-top {
border-top-left-radius: 0.4rem;
border-top-right-radius: 0.4rem;
}
.card-img-top {
width: 100%;
}
.card-img-top img {
border-top-left-radius: 0.4rem !important;
border-top-right-radius: 0.4rem !important;
}
figure{
margin:0;
}
figure img {
width: 100%;
max-width: 100%;
height: auto!important;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row mb-3">
<div class="col-7 mx-auto text-center">
<h2 class="text-uppercase text-muted mb-3 small">Our Team</h2>
<h3 class="display-6 mb-5">Think unique and be innovative. Make a difference with us.</h3>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row gx-5">
<div class="col-md-6 col-lg-3">
<div class="position-relative">
<div class="shape rounded alert-danger rellax d-md-block" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0; border-radius:0.4rem !important; opacity:0.5;"></div>
<div class="card">
<figure class="card-img-top"><img class="img-fluid" src="https://bootstraplily.com/demo/multipurpose/images/1.jpg" alt="" /></figure>
<div class="card-body p-4">
<h4 class="mb-2">Cory Zamora</h4>
<p class="mb-0">Marketing Specialist</p>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /div -->
</div>
<!--/column -->
<div class="col-md-6 col-lg-3">
<div class="position-relative">
<div class="shape rounded alert-primary rellax d-md-block" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0; border-radius:0.4rem !important; opacity:0.5;"></div>
<div class="card">
<figure class="card-img-top"><img class="img-fluid" src="https://bootstraplily.com/demo/multipurpose/images/4.jpg" alt="" /></figure>
<div class="card-body p-4">
<h4 class="mb-2">Coriss Ambady</h4>
<p class="mb-0">Financial Analyst</p>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /div -->
</div>
<!--/column -->
<div class="col-md-6 col-lg-3">
<div class="position-relative">
<div class="shape rounded alert-success rellax d-md-block" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0; border-radius:0.4rem !important; opacity:0.5;"></div>
<div class="card">
<figure class="card-img-top"><img class="img-fluid" src="https://bootstraplily.com/demo/multipurpose/images/2.jpg" alt="" /></figure>
<div class="card-body p-4">
<h4 class="mb-2">Nikolas Brooten</h4>
<p class="mb-0">Sales Manager</p>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /div -->
</div>
<!--/column -->
<div class="col-md-6 col-lg-3">
<div class="position-relative">
<div class="shape rounded alert-warning rellax d-md-block" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0; border-radius:0.4rem !important; opacity:0.5;"></div>
<div class="card">
<figure class="card-img-top"><img class="img-fluid" src="https://bootstraplily.com/demo/multipurpose/images/3.jpg" alt="" /></figure>
<div class="card-body p-4">
<h4 class="mb-2">Jackie Sanders</h4>
<p class="mb-0">Investment Planner</p>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /div -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</body>
</html>
jsfiddle example
