Bootstrap content section design with three icons in circle shape bootstrap snipp made with bootstrap framework, you can use this in middle of your webpage, simple div structure easy to implement.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
<title>Icons content section</title>
</head>
<body>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
.box-100{
transition:all 0.3s ease;
cursor:pointer;
box-shadow: 0px 0px 2px 6px rgba(0,0,0,0.03);
width: 100px;
height: 100px;
border-radius: 100px;
}
.box-100 i{
font-size:26px;
}
.box-100:hover{
box-shadow: 0px 0px 5px 8px rgba(0,0,0,0.08);
}
.box-100:hover i{
color:#e34c43;
}
.btn-link {
color: #e34c43;
transition: all 0.3s ease;
font-weight: bold;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn-link:hover {
color: #db3447;
opacity: 0.5;
text-decoration: none;
}
</style>
<div class="container py-5">
<div class="row py-5">
<div class="col-12 text-center">
<h2 class="mb-2 h1 font-weight-bold">Super clean user interface for easier use.</h2>
<p class="text-black-50 mb-5">Our design projects are fresh and simple and will benefit your
business greatly.</p>
<div class="row pt-3">
<div class="col-lg-4 col-md-6">
<div class="d-flex justify-content-center align-items-center border rounded-circle box-100 mx-auto">
<i class="lni lni-apartment"></i>
</div>
<h5 class="mb-3 mt-5">Image Heading Here</h5>
<p class="mb-4 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut mattis metus, id accumsan erat.</p>
<a href="" class="btn btn-link">View More →</a>
</div>
<div class="col-lg-4 col-md-6">
<div class="d-flex justify-content-center align-items-center border rounded-circle box-100 mx-auto">
<i class="lni lni-calculator"></i>
</div>
<h5 class="mb-3 mt-5">Image Heading Here</h5>
<p class="mb-4 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut mattis metus, id accumsan erat.</p>
<a href="" class="btn btn-link">View More →</a>
</div>
<div class="col-lg-4 col-md-6">
<div class="d-flex justify-content-center align-items-center border rounded-circle box-100 mx-auto">
<i class="lni lni-bar-chart"></i>
</div>
<h5 class="mb-3 mt-5">Image Heading Here</h5>
<p class="mb-4 text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut mattis metus, id accumsan erat.</p>
<a href="" class="btn btn-link">View More →</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
