Bootstrap Snippet Bootstrap 5 Testimonial Carousel 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 ---------->
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    
<!-- Font Awesome 5 CSS -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.13.0/css/all.css">
 <section class="client pt-3 pb-5">
  <div class="container">
    <div class="row text-center">
      <div class="col-12">
        <h1 class="display-3 fw-bold text-white">Testimonials</h1>
        <hr class="bg-white mb-4 mt-0 d-inline-block mx-auto" style="width: 100px; height:3px;">
        <p class="p-text text-white">What our clients are saying</p> 
      </div>
    </div>
    <div class="row align-items-md-center text-white">
      <div class="col-lg-12 col-md-12 col-sm-12">
     <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
              <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="row p-4">
          <div class="t-card">
                <i class="fa fa-quote-left" aria-hidden="true"></i>
        <p class="lh-lg">Review goes here...</p>
                      <i class="fa fa-quote-right" aria-hidden="true"></i>
                    </div>
          <div class="row">                    
           <div class="col-sm-2 pt-3">
             <img src="https://source.unsplash.com/300x300/?girl" class="rounded-circle img-responsive img-fluid">
                        </div>                    
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
.client {
    width: 100%;
    height: 100%;
    background: #7F00FF;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #E100FF, #7F00FF);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #E100FF, #7F00FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.carousel-icon i {
  font-size: 5rem;
  color: rgba(255, 255, 255, 0.3);
}
.carousel-item i {
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.3);
}
.t-card {
  padding: 1.8125rem 1.125rem;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 1.25rem;
  color: #fff;
  height: auto;
}
.arrow-down {
  width: 0;
  height: 0;
  border-left: 1.5625rem solid transparent;
  border-right: 1.5625rem solid transparent;
  border-top: 1.25rem solid rgba(0, 0, 0, 0.5);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap 5 Testimonial Carousel"
Bootstrap 4.1.1 Snippet by Umerfarooq

Related: See More

Questions / Comments:

"Bootstrap 5 Testimonial Carousel" Bootstrap 4.1.1 Snippet by Umerfarooq

Related: See More

Questions / Comments:

"Bootstrap 5 Testimonial Carousel"
Bootstrap 4.1.1 Snippet by Umerfarooq