Create a Responsive Services Section Design Using HTML, CSS & Bootstrap

Welcome to our tutorial on how to create a responsive services section design using HTML, CSS, and Bootstrap! A well-designed services section is essential for showcasing your offerings and engaging website visitors. Making it responsive ensures that it looks great and functions smoothly on any device.

Throughout this guide, you’ll learn how to build a responsive services section design step by step:

Setting up the HTML Structure: Learn how to structure your HTML to create a responsive services section that adapts to different screen sizes.
Styling with CSS: Explore CSS techniques to style your services section, making it visually appealing and user-friendly across devices. A responsive services section design enhances the overall user experience.
Enhancing with Bootstrap: Dive into Bootstrap to leverage its grid system and components for creating a responsive layout for your services section.

By the end of this tutorial, you’ll have the skills to design and implement a responsive services section design that effectively showcases your services on any device.

Responsive Services Section Design using HTML CSS And Bootstrap

If you want to make a Responsive Services Section Design using HTML CSS & Bootstrap, then you have to follow the steps which are given below. Using these steps, you can easily create the Services Section.

Step 1: First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Animated Services Section Design Using HTML And CSS | CoderRishad</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <section id="services-section" class="text-center">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2 class="section-title py-5">Our <span>Services</span></h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="service-wrap">
                        <i class="fas fa-laptop"></i>
                        <h4>Web Design</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="service-wrap">
                        <i class="fas fa-code"></i>
                        <h4>Web Development</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="service-wrap">
                        <i class="fas fa-mobile-alt"></i>
                        <h4>Responsive Design</h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Step 2: Now, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS CODE:

#services-section {
    background: #f1f1f1;
    padding: 30px 0px;
    min-height: 100vh;
    background-image: url("https://res.cloudinary.com/jerrick/image/upload/v1627943514/6108725ad9e5c6001f1338aa.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
a, a:hover, a:focus, a:active {
    text-decoration: none;
    outline: none;
}
.section-title {
    color:#fff;
    font-size: 44px;
    font-weight: 700;
}
.section-title span{
    color:red;
}
.service-wrap{
    position: relative;
    background: white;
    overflow: hidden;
    padding: 67px 40px 64px;
    margin: 10px 5px;
    z-index: 1;
    cursor: pointer;
}
.service-wrap::after {
    content: "";
    position: absolute;
    background: red;
    width: 100%;
    height: 100%;
    left: 0;
    top: -100%;
    z-index: -1;
    transition: all 0.35s;
}
.service-wrap:hover::after {
    top: 0px;
}
.service-wrap i {
    position: relative;
    background: red;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    color: white;
    font-size: 60px;
    line-height: 100px;
    margin-bottom: 30px;
    z-index: 1;
    transition: all 0.35s;
}
.service-wrap i::after {
    content: "";
    position: absolute;
    border: 2px solid red;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    left: -10px;
    top: -10px;
    transition: all 0.35s;
}
.service-wrap i,
.service-wrap h4,
.service-wrap p {
    transition: all 0.35s;
}
.service-wrap:hover i,
.service-wrap:hover h4,
.service-wrap:hover p {
    color: white;
}
.service-wrap:hover i::after {
    border-color: white;
}
.service-wrap:hover i {
    background-color: white;
    color: red;
}
.service-wrap p {
    margin: 0px;
}