Responsive Quotes built with the latest Bootstrap 5, HTML & CSS. Various variations of block quotes and quote boxes. Different styles, colors and functionalities.
Check out Bootstrap Quotes Documentation for detailed instructions & even more examples.
<sectionclass="vh-100 gradient-custom"><divclass="container py-5 h-100"><divclass="row d-flex justify-content-center align-items-center h-100"><divclass="col col-xl-10"><divclass="card"><divclass="card-body py-5"><!-- Carousel wrapper --><divid="carouselDarkVariant" class="carousel slide carousel-dark" data-mdb-ride="carousel"><!-- Indicators --><divclass="carousel-indicators mb-0"><buttondata-mdb-target="#carouselDarkVariant" data-mdb-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button><buttondata-mdb-target="#carouselDarkVariant" data-mdb-slide-to="1" aria-label="Slide 1"></button><buttondata-mdb-target="#carouselDarkVariant" data-mdb-slide-to="2" aria-label="Slide 1"></button></div><!-- Inner --><divclass="carousel-inner pt-2 pb-5"><!-- Single item --><divclass="carousel-item active"><divclass="row d-flex justify-content-center"><divclass="col-md-8 col-lg-9 col-xl-8"><divclass="d-flex"><divclass="flex-shrink-0"><imgsrc="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp" class="rounded-circle mb-4 mb-lg-0 shadow-2" alt="woman avatar" width="90"
height="90"></div><divclass="flex-grow-1 ms-4 ps-3"><figure><blockquoteclass="blockquote mb-4"><p><iclass="fas fa-quote-left fa-lg text-warning me-2"></i><spanclass="font-italic">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur sint nesciunt ad itaque aperiam expedita officiis incidunt minus facere, molestias quisquam impedit inventore.</span></p></blockquote><figcaptionclass="blockquote-footer">
Miranda Smith in <citetitle="Source Title">The Guardian</cite></figcaption></figure></div></div></div></div></div><!-- Single item --><divclass="carousel-item"><divclass="row d-flex justify-content-center"><divclass="col-md-8 col-lg-9 col-xl-8"><divclass="d-flex"><divclass="flex-shrink-0"><imgsrc="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp" class="rounded-circle mb-4 mb-lg-0 shadow-2" alt="woman avatar" width="90"
height="90"></div><divclass="flex-grow-1 ms-4 ps-3"><figure><blockquoteclass="blockquote mb-4"><p><iclass="fas fa-quote-left fa-lg text-warning me-2"></i><spanclass="font-italic">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</span></p></blockquote><figcaptionclass="blockquote-footer">
Annie Hall <citetitle="Source Title">New York Times</cite></figcaption></figure></div></div></div></div></div><!-- Single item --><divclass="carousel-item"><divclass="row d-flex justify-content-center"><divclass="col-md-8 col-lg-9 col-xl-8"><divclass="d-flex"><divclass="flex-shrink-0"><imgsrc="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp" class="rounded-circle mb-4 mb-lg-0 shadow-2" alt="woman avatar" width="90"
height="90"></div><divclass="flex-grow-1 ms-4 ps-3"><figure><blockquoteclass="blockquote mb-4"><p><iclass="fas fa-quote-left fa-lg text-warning me-2"></i><spanclass="font-italic">At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint amet dolore.</span></p></blockquote><figcaptionclass="blockquote-footer">
Jason More in <citetitle="Source Title">Smash Magazine</cite></figcaption></figure></div></div></div></div></div></div><!-- Inner --><!-- Controls --><buttonclass="carousel-control-prev" type="button" data-mdb-target="#carouselDarkVariant"
data-mdb-slide="prev"><spanclass="carousel-control-prev-icon" aria-hidden="true"></span><spanclass="visually-hidden">Previous</span></button><buttonclass="carousel-control-next" type="button" data-mdb-target="#carouselDarkVariant"
data-mdb-slide="next"><spanclass="carousel-control-next-icon" aria-hidden="true"></span><spanclass="visually-hidden">Next</span></button></div><!-- Carousel wrapper --></div></div></div></div></div></section>.gradient-custom {
/* fallback for old browsers */background:#f6d365;
/* Chrome 10-25, Safari 5.1-6 */background:-webkit-linear-gradient(to right,rgba(246,211,101,1),rgba(253,160,133,1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */background:linear-gradient(to right,rgba(246,211,101,1),rgba(253,160,133,1))
}Download MDB 5 - free UI KIT
Choose your favourite customized component and click on the image
Copy & paste the code into your MDB project
- Bootstrap Address Form
- Bootstrap Avatar
- Bootstrap Back To Top Button
- Bootstrap Carousel Slider with Thumbnails
- Bootstrap Chat
- Bootstrap Code Blocks
- Bootstrap Comments
- Bootstrap Comparison Table
- Bootstrap Credit Card Form
- Bootstrap Drawer
- Bootstrap Nested Dropdown
- Bootstrap FAQ component / section
- Bootstrap Gallery
- Bootstrap Hamburger Menu
- Bootstrap Invoice
- Bootstrap Jumbotron
- Bootstrap Login Form
- Bootstrap Maps
- Bootstrap Media Object
- Bootstrap Mega Menu
- Bootstrap Multiselect
- Bootstrap News Feed
- Bootstrap Offcanvas
- Bootstrap Order Details
- Bootstrap Page Transitions
- Bootstrap Payment Forms
- Bootstrap Product Cards
- Bootstrap Profiles
- Bootstrap Quotes
- Bootstrap Registration Form
- Bootstrap Expanding Search Bar
- Bootstrap Shopping Carts
- Bootstrap Side Navbar
- Bootstrap Sidebar
- Bootstrap Social Media Icons & Buttons
- Bootstrap Square Buttons
- Bootstrap Survey Form
- Bootstrap Testimonial Slider
- Bootstrap Testimonials
- Bootstrap Textarea
- Bootstrap Timeline
- Bootstrap To Do List
- Bootstrap Video Carousel / Gallery
- Bootstrap Weather