NiceSnippets.com
Bootstrap 4 Landing Page Services Section Design
You can display your service usign this bootstrap 4 services section design. in your website landing page you can display you company service,hospital service,station service. this is information technology(it) company services design. you can simply implement in your website landing page. also this call bootstrap services page examples.
We allows to free snippets of bootstrap services template , you can download full code of bootstrap services section layout. Here in this post i will give you example of bootstrap services page examples snippet and you will get simple code of html, css and jquery. In bootstrap service box snippet i give you three tab with html, css and js, you can easily get code of Landing Page Services Section layout.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<section>
<div class="row-fluid service-main">
<div class="offset-md-1 col-md-10 col-12 pt-3 pb-3">
<div class="row">
<div class="col-md-12 col-12 service-heading text-center pt-3">
<h2 class="pb-2 border-bottom text-white">OUR SERVICES</h2>
<p>Lorem ipsum dolor sit amet tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-12 mt-5">
<div class="row service-box">
<div class="col-md-3 col-3 service-box-icon">
<i class="text-center fa fa-laptop rounded-circle" aria-hidden="true"></i>
</div>
<div class="col-md-9 col-9 service-box-desc pl-0">
<h5 class="text-white border border-top-0 border-left-0 border-right-0 pb-2"><strong>Web Developing</strong></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation.</p>
</div>
</div>
</div>
<div class="col-md-6 col-12 mt-5">
<div class="row service-box">
<div class="col-md-3 col-3 service-box-icon">
<i class="text-center fa fa-pencil rounded-circle" aria-hidden="true"></i>
</div>
<div class="col-md-9 col-9 service-box-desc pl-0">
<h5 class="text-white border border-top-0 border-left-0 border-right-0 pb-2"><strong>Web Designing</strong></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation.</p>
</div>
</div>
</div>
<div class="col-md-6 col-12 mt-5">
<div class="row service-box">
<div class="col-md-3 col-3 service-box-icon">
<i class="text-center fa fa-server rounded-circle" aria-hidden="true"></i>
</div>
<div class="col-md-9 col-9 service-box-desc pl-0">
<h5 class="text-white border border-top-0 border-left-0 border-right-0 pb-2"><strong>Graphic Designing</strong></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation.</p>
</div>
</div>
</div>
<div class="col-md-6 col-12 mt-5">
<div class="row service-box">
<div class="col-md-3 col-3 service-box-icon">
<i class="text-center fa fa-cog rounded-circle"></i>
</div>
<div class="col-md-9 col-9 service-box-desc pl-0">
<h5 class="text-white border border-top-0 border-left-0 border-right-0 pb-2"><strong>Software Testing</strong></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
section{
background-image: url('//nicesnippets.com/demo/service-bg01.png');
background-size: 100% 100%;
color: #e1e1e1;
}
.service-main{
background: rgba(0, 0, 0, 0.7);
}
.service-heading h2{
display: inline-block;
}
.service-box-icon i{
height: 70px;
width: 70px;
padding: 19px 0px;
font-size: 30px;
border: 2px solid #FFF;
color: #EB5249;
box-shadow: 0px 0px 3px 3px #EB5249;
}
