Bootstrap Snippet Service block using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div class="container">
       <div class="row">
          <div class="service-heading">
             <h1 class="sh-title">What we Do?</h1>
             <h5 class="st-sub-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br/> Lorem Ipsum has been the industry's standard dummy</h5>
          </div> 
          <div class="clearfix"></div>
          <div class="col-md-3 text-center">
            <div class="service-block">
                 <div class="icon-block">
                   <span class="icon-block-inner"><i class="fa fa-paint-brush" aria-hidden="true"></i></span>
                 </div>
                 <h2 class="sb-title">Graphics</h2>  
                 <p class="service-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p>
                 <a href="#" class="btn btn-default service-btn">Read more...</a>
            </div>
          </div>
          
          <div class="col-md-3 text-center">
            <div class="service-block">
                 <div class="icon-block">
                   <span class="icon-block-inner"><i class="fa fa-paint-brush" aria-hidden="true"></i></span>
                 </div>
                 <h2 class="sb-title">Graphics</h2>  
                 <p class="service-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</p>
                 <a href="#" class="btn btn-default service-btn">Read more...</a>
            </div>
          </div>
          
          <div class="col-md-3 text-center">
            <div class="service-block">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
a:hover, a:focus {
  color: #2a6496;
  text-decoration: none;
}
.service-heading{
    margin:20px auto;
    }
.sh-title {
  display: block;
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 15px;
  text-align: center;
}
.st-sub-title {
  color: #969696;
  font-size: 16px;
  font-weight: 200;
  line-height: 20px;
  text-align: center;
}
.service-block {
  margin-bottom: 15px;
  padding: 15px;
}
.icon-block {
  border: 1px solid #fd4c3c;
  border-radius: 50%;
  display: block;
  height: 150px;
  margin: 20px auto;
  vertical-align: middle;
  width: 150px;
}
.icon-block-inner {
  background: #fd4c3c;
  border-radius: 50%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Service block "
Bootstrap 3.0.0 Snippet by Eliasmia

Related: See More

Questions / Comments:

"Service block " Bootstrap 3.0.0 Snippet by Eliasmia

Related: See More

Questions / Comments:

"Service block "
Bootstrap 3.0.0 Snippet by Eliasmia