Bootstrap 5 Services Section
Bootstrap 5 Services Section:- Bootstrap 5 Services Section: Many professionals, small companies, and agencies seek effective ways to highlight their services throughout their website. With our services section, you can effortlessly showcase your expertise, offerings, and solutions, ensuring visitors understand the value you bring to the table.
“Our company offers a range of specialized services tailored to meet the unique needs of our customers. From personalized consultations to innovative solutions, we strive to provide exceptional value and support. Our commitment to excellence sets us apart from the competition, ensuring that our customers receive the highest quality service and satisfaction.”
Using Google Fonts:-
Google Fonts is a service offered by Google at no cost, providing access to a vast collection of fonts. These fonts are available under an open-source license, allowing users to utilize them freely in both commercial and non-commercial projects.
Choosing your fonts
Now, let’s choose our fonts. Visit fonts.google.com and browse through the selection. When you find a font you like, simply click on the small “+” (plus) button to add it to your collection. I’m going to use Livvic. Once you’ve selected your desired font, expand the drawer located at the bottom of the page.
GOOGLE FONTS LINK:-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&family=Urbanist:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
Project Folder Structure:-
Responsive Services Section.
Inside this folder, you’ll find two files: index.html and style.css. The index.html file is the HTML document, while the style.css file serves as the stylesheet.
Service Section
I have used
- HTML
- CSS
- IMAGE
- Bootstrap 5
- ‘Livvic’ font on google fonts
Bootstrap CDN
CSS LINK:-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
Service Section Using HTML:-
<!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">
<link rel="stylesheet" href="css/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&family=Urbanist:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<section class="section bg-color">
<div class="container">
<div class="row mb-5">
<div class="col-lg-5 col-md-8 m-auto">
<div class="sub-heading text-center">
<span>SERVICES</span>
<h2>We Are Offering All Kinds of IT Solutions Services</h2>
</div>
</div>
</div>
<div class="row g-3">
<div class="col-lg-4 col-md-6">
<div class="service-box">
<div class="service-icon mb-3">
<img src="img/1.png" class="img-fluid w-25" alt="">
</div>
<div class="service-content">
<h3 class="mb-3">Web Development</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus etiusto
odio data center for managing database.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-box">
<div class="service-icon mb-3">
<img src="img/2.png" class="img-fluid w-25" alt="">
</div>
<div class="service-content">
<h3 class="mb-3">Analytic Solutions</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus etiusto
odio data center for managing database.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-box">
<div class="service-icon mb-3">
<img src="img/3.png" class="img-fluid w-25" alt="">
</div>
<div class="service-content">
<h3 class="mb-3">Clould & DevOps</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus etiusto
odio data center for managing database.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-box">
<div class="service-icon mb-3">
<img src="img/4.png" class="img-fluid w-25" alt="">
</div>
<div class="service-content">
<h3 class="mb-3">Product & Design</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus etiusto
odio data center for managing database.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-box">
<div class="service-icon mb-3">
<img src="img/5.png" class="img-fluid w-25" alt="">
</div>
<div class="service-content">
<h3 class="mb-3">Data Center</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus etiusto
odio data center for managing database.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-box">
<div class="service-icon mb-3">
<img src="img/6.png" class="img-fluid w-25" alt="">
</div>
<div class="service-content">
<h3 class="mb-3">Web Development</h3>
<p>At vero eos et accusamus etiusto odio praesentium accusamus etiusto
odio data center for managing database.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>Service Section Using CSS:-
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&family=Urbanist:wght@100;200;300;400;500;600;700;800;900&display=swap');
body{
font-family: 'Livvic', sans-serif;
}
.section{
padding-top: 50px;
padding-bottom: 50px;
}
.bg-color{
background-color: #F6F7F9;
}
.sub-heading span{
color: #106eea;
font-weight: 600;
}
.sub-heading h2{
font-weight: 700;
font-family: 'Livvic', sans-serif;
}
.service-box{
padding: 20px;
background-color: #fff;
transition: .4s;
transform: translateY(0);
cursor: pointer;
}
.service-content h3{
font-size: 24px;
font-weight: 700;
color: rgb(58, 58, 58);
}
.service-box:hover{
box-shadow: 0 0 30px #eee;
transform: translateY(-.5rem);
}
.service-content h3:hover{
color: #106eea;
}
Video Tutorial:-
If you would like to learn by coming along to the video tutorial, then check out the video down below. Also, subscribe to my youtube channel so you don’t miss any of the exciting tutorials I post regularly.
I hope you find it useful. Please follow our social media profiles to keep yourself updated for a future post from this blog. Thanks for vising.