"Testimonial section"
Bootstrap 4.1.1 Snippet by koshikojha

Post to Facebook Tweet this

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 ---------->
<section class="section-ptb bg-white bg-5">
<div class="container">
<div class="row text-center">
<div class="col-12">
<div class="heading mb-80">
<h2>Testimonials</h2>
<p class="mb-20">Looked up one of the more obscure Latin words, consectetur, from <br class="d-none d-md-block"> a Lorem Ipsum passage, and going</p>
<hr class="line bw-2 mx-auto line-sm mb-5">
<hr class="line bw-2 mx-auto">
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="client-testimonial position-relative">
<div class="client-nav">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#client1" data-toggle="tab">
<img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/1.png" alt="Client Image">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#client2" data-toggle="tab">
<img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/2.png" alt="Client Image">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#client3" data-toggle="tab">
<img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/3.png" alt="Client Image">
</a>
</li>
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
html{font-size:10px}body{font-size:1.4rem}.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{border:none;}
.h2, h2 {font-size: 5rem;text-shadow: 1px 1px #ffffff, -1px 1px #ffffff, 1px -1px #ffffff, -1px -1px #ffffff, 1px 1px 5px #252920;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom:1.5rem;font-family:"Dosis", sans-serif;font-weight:600;line-height:1.2;color:#1c223a;}
.client-testimonial .drop-shadow {
-webkit-filter: drop-shadow(0px 15px 50px rgba(2, 173, 136, 0.2));
-moz-filter: drop-shadow(0px 15px 50px rgba(2, 173, 136, 0.2));
-o-filter: drop-shadow(0px 15px 50px rgba(2, 173, 136, 0.2));
filter: drop-shadow(0px 15px 50px rgba(2, 173, 136, 0.2)); }
.bg-5 {
background-image: url("http://regaltheme.com/tf/multi/rnr/assets/img/bg/5.png");
background-position: center 65%;
background-size: auto;
background-repeat: no-repeat;
}
.client-testimonial .client-nav .nav-item {
position: absolute;
z-index: 5;
width: 10.5rem; }
.client-testimonial .client-nav .nav-item:nth-child(1) {
top: 2.5rem;
right: 16%;
width: 7rem; }
.client-testimonial .client-nav .nav-item:nth-child(2) {
bottom: 3rem;
right: 0; }
@media (min-width: 1281px) {
.client-testimonial .client-nav .nav-item:nth-child(2) {
right: -3rem; } }
.client-testimonial .client-nav .nav-item:nth-child(3) {
bottom: 9rem;
left: 4%; }
.client-testimonial .client-nav .nav-item:nth-child(4) {
top: -2rem;
left: 0;
width: 7rem; }
@media (min-width: 1281px) {
.client-testimonial .client-nav .nav-item:nth-child(4) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
Services section using bootstrap 4

Questions / Comments: