Bootstrap Snippet Bootstrap 4 Services 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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="background2">
    <div class='container'>
        <h1>Services</h1>
    <div class="row">
        
    <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="services-box leftReveal" data-sr-id="13">
                        
                        <i class="fa fa-code fa-2x services-icon"></i>
                        <h3 class="service-name">1. Web Design</h3>
                        <p class="text-small">Lorem ipsum dolor sit amet, consectet adipiscing elit. Cras est urna, imperd eget sem at, pellentes que cursus elit.</p>
                        <button type="button" class="btn btn-default mt10" data-toggle="modal" data-target="#item1-services">Info</button>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="services-box leftReveal" data-sr-id="13">
                        
                        <i class="fa fa-code fa-2x services-icon"></i>
                        <h3 class="service-name">1. Web Design</h3>
                        <p class="text-small">Lorem ipsum dolor sit amet, consectet adipiscing elit. Cras est urna, imperd eget sem at, pellentes que cursus elit.</p>
                        <button type="button" class="btn btn-default mt10" data-toggle="modal" data-target="#item1-services">Info</button>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="services-box leftReveal" data-sr-id="13">
                        
                        <i class="fa fa-code fa-2x services-icon"></i>
                        <h3 class="service-name">1. Web Design</h3>
                        <p class="text-small">Lorem ipsum dolor sit amet, consectet adipiscing elit. Cras est urna, imperd eget sem at, pellentes que cursus elit.</p>
                        <button type="button" class="btn btn-default mt10" data-toggle="modal" data-target="#item1-services">Info</button>
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
.background2 {
    background-color: #1d1d1d;
}
.services-box {
    padding: 30px;
    background-color: #212121;
    border-left: 2px solid #292929;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
}
.services-icon {
    font-size: 40px;
    color: #8980fe;
}
.service-name {
    margin-bottom: 15px;
    margin-top: 15px;
}
.text-small {
    font-size: 16px;
    color: #fff;
}
.btn-default {
    color: #fff;
    background-color: transparent;
    border-color: #535353;
}
.btn {
    border-radius: 45px;
    margin-bottom: 1px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap 4 Services"
Bootstrap 4.1.1 Snippet by dkstudio

Related: See More

Questions / Comments:

"Bootstrap 4 Services" Bootstrap 4.1.1 Snippet by dkstudio

Related: See More

Questions / Comments:

"Bootstrap 4 Services"
Bootstrap 4.1.1 Snippet by dkstudio