Bootstrap Snippet card 3 columns responsive 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 ---------->
<h6>https://snippets.wrappixel.com/single-column-service-with-image/</h6>
<div class="bg-light py-5 service-5">
    <div class="container">
        <!-- Row  -->
        <div class="row"> 
            <!-- Column -->
            <div class="col-md-4 wrap-service5-box">
                <div class="card card-shadow border-0 mb-4">
                    <div class="card-body d-flex">
                        <div class="mr-4 mb-2 text-success-gradiant icon-size">N</div>
                        <div class="">
                            <h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Instant Solutions</a></h6>
                            <p class="mt-3">You can relay on our amazing features list and also our services.</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column -->
            <!-- Column -->
            <div class="col-md-4 wrap-service5-box">
                <div class="card card-shadow border-0 mb-4">
                    <div class="card-body d-flex">
                        <div class="mr-4 mb-2 text-success-gradiant icon-size">P</div>
                        <div class="">
                            <h6 class="font-weight-medium"><a href="javascript:void(0)" class="linking">Powerful Tech </a></h6>
                            <p class="mt-3">You can relay on our amazing features list and also our customer services.</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column -->
            <!-- Column -->
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
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500);
.service-5 {
  font-family: "Montserrat", sans-serif;
    color: #8d97ad;
  font-weight: 300;
}
.service-5 h1, .service-5 h2, .service-5 h3, .service-5 h4, .service-5 h5, .service-5 h6 {
  color: #3e4555;
}
.service-5 a{
    text-decoration: none;
}
.service-5 .linking{
    color: #3e4555;
}
.service-5 .linking:hover{
    color: #316ce8;
}
.service-5 .font-weight-medium {
    font-weight: 500;
}
.service-5 .bg-light {
    background-color: #f4f8fa !important;
}
.service-5 .subtitle {
    color: #8d97ad;
    line-height: 24px;
}
.service-5 .card.card-shadow {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"card 3 columns responsive"
Bootstrap 4.1.1 Snippet by saikrishna99666

Related: See More

Questions / Comments:

"card 3 columns responsive" Bootstrap 4.1.1 Snippet by saikrishna99666

Related: See More

Questions / Comments:

"card 3 columns responsive"
Bootstrap 4.1.1 Snippet by saikrishna99666