Responsive Icon Box Snippet for Services Section Bootstrap and Custom Icons

Create a stunning and responsive icon box section using Bootstrap icons. Perfect for showcasing services like websites, e-commerce, mobile apps, and more. Fully customizable and mobile-friendly snippet for modern web design.

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<section id="fw_icon_snippet_4">
    <div class="container">
        <div class="heading">
            <div class="left">
                <h2>Our Services</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
            </div>
            <div class="right">
                <a href="#0" class="btn btn-danger">view all</a>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="icon_box">
                    <div class="icon">
                        <i class="bi bi-globe"></i>
                    </div>
                    <h3>website pro</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                    <a href="#0">
                        <i class="bi bi-arrow-right-circle more"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="icon_box">
                    <div class="icon">
                        <i class="bi bi-cart"></i>
                    </div>
                    <h3>E-commerce</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                    <a href="#0">
                        <i class="bi bi-arrow-right-circle more"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="icon_box">
                    <div class="icon">
                        <i class="bi bi-phone"></i>
                    </div>
                    <h3>Mobile App</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                    <a href="#0">
                        <i class="bi bi-arrow-right-circle more"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="icon_box">
                    <div class="icon">
                        <i class="bi bi-layers"></i>
                    </div>
                    <h3>Web Application</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                    <a href="#0">
                        <i class="bi bi-arrow-right-circle more"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="icon_box">
                    <div class="icon">
                        <i class="bi bi-bank"></i>
                    </div>
                    <h3>Digital Marketing</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                    <a href="#0">
                        <i class="bi bi-arrow-right-circle more"></i>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-6">
                <div class="icon_box">
                    <div class="icon">
                        <i class="bi bi-lightbulb"></i>
                    </div>
                    <h3>Brand Creation</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                    <a href="#0">
                        <i class="bi bi-arrow-right-circle more"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
body {
    font-family: "Nunito", sans-serif;
}
#fw_icon_snippet_4{
  padding: 50px 0;
}
#fw_icon_snippet_4 .heading{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}
#fw_icon_snippet_4 .heading h2{
  font-weight: 700;
  margin-bottom: 10px;
  position: relative;
}
#fw_icon_snippet_4 .heading p{
  margin: 0;
  color: #666;
}
#fw_icon_snippet_4 .heading a{
  border-radius: 0;
  text-transform: capitalize;
  padding: 10px 25px;
  font-size: 16px;
  font-weight: 600;
}
#fw_icon_snippet_4 .icon_box{
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  padding: 30px;
  margin-bottom: 30px;
  text-align: center;
  position: relative;
  transition: all .4s;
}
#fw_icon_snippet_4 .icon_box:hover{
  transform: translateY(-10px);
  background: #dc3545;
}
#fw_icon_snippet_4 .icon_box .icon i{
  color: #dc3545;
  font-size: 36px;
  margin-bottom: 10px;
  display: inline-block;
  transition: all .4s;
}
#fw_icon_snippet_4 .icon_box h3{
  font-weight: 600;
  text-transform: capitalize;
  font-size: 24px;
  margin-bottom: 10px;
  transition: all .4s;
}
#fw_icon_snippet_4 .icon_box p{
  color: #666;
  margin-bottom: 20px;
  transition: all .4s;
}
#fw_icon_snippet_4 .icon_box a{
  color: #666;
  font-size: 22px;
  transition: all .4s;
  display: block;
}
#fw_icon_snippet_4 .icon_box:hover a,
#fw_icon_snippet_4 .icon_box:hover p,
#fw_icon_snippet_4 .icon_box:hover h3,
#fw_icon_snippet_4 .icon_box:hover .icon i{
  color: #fff;
}
@media (max-width: 576px){
  #fw_icon_snippet_4 .heading{
    flex-direction: column;
    align-items: flex-start;
  }
  #fw_icon_snippet_4 .heading p{
    margin-bottom: 20px;
  }
}

JS

Width:

Height:

This responsive icon box snippet is designed to enhance your services section with Bootstrap icons and sleek design. Ideal for web projects, e-commerce platforms, mobile apps, and digital marketing services, this snippet is fully customizable. The clean layout is responsive and mobile-friendly, ensuring a modern and professional look for any website. Perfect for developers looking for a simple yet effective way to display various services with a visually appealing and intuitive icon-based layout.

Make a Comment

Your email address will not be published. Required fields are marked *

Related Snippet

Modern Breadcrumb Navigation with Icons and Responsive Design

Modern Breadcrumb Navigation with Icons and Responsive Design

14-Aug-2024 Updated : 24-Aug-2024

Website Navbar Design Using HTML and CSS

Website Navbar Design Using HTML and CSS

23-Jan-2025 Updated : 23-Jan-2025

Dynamic Website Counter Snippet for Engaging Landing Pages

Dynamic Website Counter Snippet for Engaging Landing Pages

12-Sep-2024 Updated : 12-Sep-2024

Professional footer design | Custom footer code for websites

Professional footer design | Custom footer code for websites

07-Aug-2024 Updated : 24-Aug-2024

Snippets Categories