<section class="position-relative py-20 pt-md-32 bg-dark overflow-hidden">
<img class="position-absolute top-0 start-0 end-0 img-fluid" src="yofte-assets/elements/line-top.svg" alt="">
<div class="position-relative container">
<h2 class="mb-20 text-white">What Customers Say</h2>
<div class="position-relative mw-4xl mx-auto">
<div class="position-absolute top-50 translate-middle-y start-0 end-0 border ms-n6 me-n6" style="height: 90%;"></div>
<div class="position-relative mx-auto mb-20 py-12 py-md-28 bg-dark border border-white">
<img class="mb-10 d-block mx-auto rounded-circle" style="width: 128px; height: 128px;" src="yofte-assets/images/placeholder-portrait.png" alt="">
<div class="position-relative mw-2xl px-4 mx-auto">
<img class="d-none d-md-block position-absolute top-0 start-0 img-fluid" src="yofte-assets/elements/quote.svg" alt="">
<img class="d-none d-md-block position-absolute top-0 end-0 img-fluid" src="yofte-assets/elements/quote.svg" alt="">
<div class="mw-md mx-auto px-4">
<h5 class="mb-16 text-white">Tonight I had interdum at ante porta, eleifend feugiat nunc. In semper euismod mi a accumsan. Thaaank you! 👏💥</h5>
<div class="d-flex flex-wrap align-items-center">
<p class="mb-6 mb-md-0 text-muted">Alice Kenowski, NYC</p>
<div class="ms-auto d-flex align-items-center justify-content-end">
<a class="me-5 d-flex align-items-center justify-content-center bg-primary rounded-2" href="#" style="width: 48px; height: 48px;">
<svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
</svg>
</a>
<a class="d-flex align-items-center justify-content-center bg-info rounded-2" href="#" style="width: 48px; height: 48px;">
<svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center"><a class="btn btn-primary" href="#">Show More</a></div>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- About us 5
- Alert 85
- Application 63
- Banners 15
- Blog 93
- Breadcrumbs 4
- Call to action 113
- Careers 16
- Contact 52
- Content 62
- Cookies 53
- Download 5
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 58
- Features 160
- Footers 68
- Graphs 18
- HTTP codes 65
- Hero section 106
- How it works 53
- Logo clouds 89
- Modals 6
- Navbar 68
- Navigation (horizontal) 107
- Navigation (vertical) 6
- Newsletter 58
- Portfolio 39
- Pricing 58
- Projects 14
- Reviews 5
- Rich text 3
- Services 5
- Sign in / Sign up 99
- Stats 89
- Tables 57
- Team 56
- Testimonials 58
- Toasts 6
- Users 25
Component #1
Component #2
Component #3
Component #4
Component #5
Your customers' words are the best advertising. Therefore, you should present them in the most beneficial way. Bootstrap reviews components will allow you to show the ratings of your company or products in a clear and attractive way. Check also the testimonals category to see similar sections.
In this mode, you will see versions of the Bootstrap reviews components that are available within our UI libraries. You will also find many other types of components that will be in the same theme. Our UI libraries are prepared by experienced designers and the code underneath them is created by an in-house team of developers.
Get access to all Bootstrap reviews components, code and our editor. Try the demo for free.
