Bootstrap testimonial snipp example v21

Bootstrap testimonial snipp example v21

bootstrap testimonial snipp

Whole html/css code


<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Testimonial snipp</title>
<style>
.card {
    border: 0;
 border-radius: .4rem;
}
.card-body {
    flex: 1 1 auto;
    padding: 2rem 2rem;
}
.ratings {
    display: inline-block;
    position: relative;
    width: 7rem;
    height: 1.8rem;
}
.ratings:after {
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    color: #fcc032;
    content: "26052605260526052605";
    overflow: hidden;
}
.bg-soft-blue {
    background-color: #f1f5fd!important;
}
.rounded img {
 border-radius: .4rem;
}
figure img {
    width: 100%;
    max-width: 100%;
    height: auto!important;
}
</style>
</head>
<body>
<div class="container pt-5 pb-5">
  <div class="row position-relative">
    <figure class="rounded position-absolute d-none d-lg-block" style="top: 50%; right:0; width: 45%; height: auto; transform: translateY(-50%); z-index:2"> <img src="" srcset="https://images.pexels.com/photos/3810796/pexels-photo-3810796.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt=""></figure>
    <div class="col-lg-9 text-center">
      <div class="card bg-soft-blue">
        <div class="card-body p-md-5 m-md-5">
          <div class="row gx-0">
            <div class="col-lg-8"> <span class="ratings mb-3"></span>
              <blockquote class="border-0 fs-lg mb-0">
                <p>“Donec id elit non mi porta gravida at eget metus. Vivamus mollis est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis porta est non commodo luctus.</p>
                <p class="mb-4">Donec id elit non mi porta gravida at eget metus. Vivamus mollis est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis porta est non commodo luctus.”</p>
                <div class="blockquote-details justify-content-center text-center">
                  <div class="p-0">
                    <h5 class="mb-1">Richard Anderson</h5>
                    <p class="mb-0">Financial Analyst</p>
                  </div>
                </div>
              </blockquote>
            </div>
            <!-- /column --> 
          </div>
          <!-- /.row --> 
        </div>
        <!--/.card-body --> 
      </div>
      <!--/.card --> 
    </div>
    <!-- /column --> 
  </div>
  <!-- /.row --> 
</div>

<!--------------------------------------Testimonial one section ends here------------------------------->

</body>
</html>

jsfiddle example

Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top