📢 Get a Free & Premium Web Templates, Admin Panel & Landing pages. Click here
Bootstrap Features sections are a combination of standard Bootstrap components that together create a consistent design perfect for Features pages.
<section class="bg-feature bg-light d-flex align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7">
<div class="mb-5 pb-lg-4 text-center">
<h5 class="text-uppercase fw-normal text-muted mb-3">What we do</h5>
<h1 class="display-6 fw-bold mb-0">Amazing features to convince you to use
our application</h1>
</div>
</div>
<!--end col-->
</div>
<!--end row-->
<div class="row justify-content-xl-center">
<div class="col-xl-3 col-lg-4 col-md-6 mt-4">
<div class="feature-box text-center border-0">
<div class="px-4 py-5">
<div class="feature-icon">
<img src="images/01.png" alt="01" class="img-fluid">
</div>
<!--end feature-icon-->
<h5 class="mt-4 pt-4">Random Cleaning</h5>
<p class="text-muted mt-4">Aliquam diam egestas pretium in rhoncus sed pharetra.</p>
<a href="#" class="btn btn-sm border mt-3">Learn More</a>
</div>
</div>
<!--end feature-box-->
</div>
<!--end col-->
<div class="col-xl-3 col-lg-4 col-md-6 mt-4">
<div class="feature-box active text-center border-0">
<div class="px-4 py-5">
<div class="feature-icon">
<img src="images/02.png" alt="02" class="img-fluid">
</div>
<!--end feature-icon-->
<h5 class="mt-4 pt-4">Messaging Option</h5>
<p class="text-muted mt-4">Aliquam diam egestas pretium in rhoncus sed pharetra.</p>
<a href="#" class="btn btn-sm border mt-3">Learn More</a>
</div>
</div>
<!--end feature-box-->
</div>
<!--end col-->
<div class="col-xl-3 col-lg-4 col-md-6 mt-4">
<div class="feature-box text-center border-0">
<div class="px-4 py-5">
<div class="feature-icon">
<img src="images/03.png" alt="03" class="img-fluid">
</div>
<!--end feature-icon-->
<h5 class="mt-4 pt-4">Quick Boostup</h5>
<p class="text-muted mt-4">Aliquam diam egestas pretium in rhoncus sed pharetra.</p>
<a href="#" class="btn btn-sm border mt-3">Learn More</a>
</div>
</div>
<!--end feature-box-->
</div>
<!--end col-->
</div>
<!--end row-->
</div>
<!--end container-->
</section>
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Poppins:wght@300;400;500;600&display=swap");
body {
font-family: "Lato", sans-serif;
color: #000000;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Poppins", sans-serif;
font-weight: 600;
}
.btn {
padding: 8px 25px;
font-size: 14px;
}
.btn:focus {
box-shadow: none;
}
.bg-feature {
height: 100vh;
position: relative;
}
.feature-box {
transition: all 0.5s ease;
}
.feature-box .feature-icon {
position: relative;
z-index: 0;
}
.feature-box .feature-icon::before {
content: "";
position: absolute;
background-image: url("../images/bg-1.png");
background-size: cover;
width: 177px;
height: 177px;
z-index: -1;
top: -53px;
left: 50%;
transform: translateX(-50%);
}
.feature-box:hover {
box-shadow: rgba(0, 0, 0, 0.02) 0px 7px 29px 0px;
background-color: #ffffff;
}
@media (min-width: 992px) {
.feature-box.active {
transform: scale(1.1);
box-shadow: rgba(0, 0, 0, 0.02) 0px 7px 29px 0px;
background-color: #ffffff;
}
}
@media (max-width: 768px) {
.bg-feature {
height: auto;
padding: 90px 0;
}
}
Add this stunning video banner to your site to showcase your products and services through video. Code is very easy to inegrate and run.
Add this elegant registration form to your website if you are providing register and login facility. Ity is very clean code and easy to impl...
Add this attractive newsletter form to your site. Your customers can stay updated with all the new things you do.