Bootstrap Snippet Service Box Style 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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="serviceBox">
                <div class="service-icon">
                    <span><i class="fa fa-globe"></i></span>
                </div>
                <h3 class="title">Web Design</h3>
                <p class="description">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis.
                </p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="serviceBox skyblue">
                <div class="service-icon">
                    <span><i class="fa fa-rocket"></i></span>
                </div>
                <h3 class="title">Web Development</h3>
                <p class="description">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis.
                </p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="serviceBox">
                <div class="service-icon">
                    <span><i class="fa fa-globe"></i></span>
                </div>
                <h3 class="title">Web Design</h3>
                <p class="description">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum? Eos autem natus et veniam perspiciatis.
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
.serviceBox{
    text-align: center;
    position: relative;
}
.serviceBox .service-icon{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    padding: 10px;
    margin: 0 auto 45px;
    border: 2px solid #fba21a;
    z-index: 1;
    position: relative;
    transition: all 0.5s ease 0s;
}
.serviceBox .service-icon:before,
.serviceBox .service-icon:after{
    content: "";
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #fba21a;
    border-top: 2px solid transparent;
    border-right: 2px solid transparent;
    position: absolute;
    bottom: 0;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) rotate(135deg);
    transition: all 0.3s ease 0s;
}
.serviceBox .service-icon:after{
    width: 20px;
    height: 20px;
    background: #fba21a;
    border: none;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Service Box Style"
Bootstrap 3.3.0 Snippet by salman768

Related: See More

Questions / Comments:

"Service Box Style" Bootstrap 3.3.0 Snippet by salman768

Related: See More

Questions / Comments:

"Service Box Style"
Bootstrap 3.3.0 Snippet by salman768