Bootstrap portfolio snipp example v06
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 portfolio snipp</title>
<style>
.card {
border: 0;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row align-items-center mb-5">
<div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7">
<h2 class="display-5 mb-3">Latest Projects</h2>
<p class="lead mb-0">Check out some of my latest projects with creative ideas.</p>
</div>
<!--/column -->
<div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">
<a href="#" class="btn btn-primary rounded-pill mb-0 px-4">See All Projects</a>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="card bg-light mb-5">
<div class="card-body p-5 pb-0">
<div class="row">
<div class="col-lg-4 pb-5 align-self-center">
<div class="small text-uppercase mb-3 fw-bold text-muted">Web Design</div>
<h3 class="h1 mb-3">Our Best Themes</h3>
<p class="mb-5">Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.</p>
<a href="#" class="link-primary text-decoration-none fw-bold text-uppercase">See Project →</a>
</div>
<!-- /column -->
<div class="col-lg-7 offset-lg-1 align-self-end">
<img class="img-fluid" src="https://bootstraplily.com/wp-content/uploads/2021/11/f1.png" alt="">
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
<div class="card bg-light mb-5">
<div class="card-body p-5">
<div class="row gy-5 align-items-center">
<div class="col-lg-4 order-lg-2 offset-lg-1">
<div class="small text-uppercase mb-3 fw-bold text-muted">Mobile Design</div>
<h3 class="h1 mb-3">Budget App</h3>
<p class="mb-5">Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.</p>
<a href="#" class="link-primary text-decoration-none fw-bold text-uppercase">See Project →</a>
</div>
<!-- /column -->
<div class="col-lg-7">
<img class="img-fluid" src="https://bootstraplily.com/wp-content/uploads/2021/11/f2.png" alt="">
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
</body>
</html>
jsfiddle example
