Quotes
Bootstrap 5 Quote component
Responsive Quotes built with Bootstrap 5. HTML & CSS. Quote boxes with quote symbol, blockquotes, quote carousel slider, various quote styles with HTML & CSS.Quote carousel
A beautiful quotes slider with author image and a quotation icon. You can explore even more testimonial templates in our pages dedicated to reviews and testimonial carousels.
.webp)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur sint nesciunt ad itaque aperiam expedita officiis incidunt minus facere, molestias quisquam impedit inventore.
.webp)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
.webp)
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.
<section class="vh-100 gradient-custom">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-xl-10">
<div class="card">
<div class="card-body py-5">
<!-- Carousel wrapper -->
<div id="carouselDarkVariant" data-mdb-carousel-init class="carousel slide carousel-dark" data-mdb-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators mb-0">
<button data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="1"
aria-label="Slide 1"></button>
<button data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="2"
aria-label="Slide 1"></button>
</div>
<!-- Inner -->
<div class="carousel-inner pt-2 pb-5">
<!-- Single item -->
<div class="carousel-item active">
<div class="row d-flex justify-content-center">
<div class="col-md-8 col-lg-9 col-xl-8">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="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>
<div class="flex-grow-1 ms-4 ps-3">
<figure>
<blockquote class="blockquote mb-4">
<p>
<i class="fas fa-quote-left fa-lg text-warning me-2"></i>
<span class="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>
<figcaption class="blockquote-footer">
Miranda Smith in <cite title="Source Title">The Guardian</cite>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="row d-flex justify-content-center">
<div class="col-md-8 col-lg-9 col-xl-8">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="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>
<div class="flex-grow-1 ms-4 ps-3">
<figure>
<blockquote class="blockquote mb-4">
<p>
<i class="fas fa-quote-left fa-lg text-warning me-2"></i>
<span class="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>
<figcaption class="blockquote-footer">
Annie Hall <cite title="Source Title">New York Times</cite>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="row d-flex justify-content-center">
<div class="col-md-8 col-lg-9 col-xl-8">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="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>
<div class="flex-grow-1 ms-4 ps-3">
<figure>
<blockquote class="blockquote mb-4">
<p>
<i class="fas fa-quote-left fa-lg text-warning me-2"></i>
<span class="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>
<figcaption class="blockquote-footer">
Jason More in <cite title="Source Title">Smash Magazine</cite>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselDarkVariant"
data-mdb-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-mdb-target="#carouselDarkVariant"
data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="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))
}
Blockquotes
A simple block quotes with author name and a colorful border.
Age is an issue of mind over matter. If you don't mind, it doesn't matter.
All you need in this life is ignorance and confidence, and then success is sure.
<section class="vh-100" style="background-color: #eee;">
<div class="container py-5 h-100">
<div class="row d-flex align-items-center h-100">
<div class="col col-lg-6 mb-4 mb-lg-0">
<figure class="bg-white p-3 rounded" style="border-left: .25rem solid #a34e78;">
<blockquote class="blockquote pb-2">
<p>
Age is an issue of mind over matter. If you don't mind, it doesn't matter.
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 font-italic">
Mark Twain
</figcaption>
</figure>
</div>
<div class="col col-lg-6">
<figure class="bg-white p-3 rounded" style="border-left: .25rem solid #f68e9d;">
<blockquote class="blockquote pb-2">
<p>
All you need in this life is ignorance and confidence, and then success is sure.
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 font-italic">
Mark Twain
</figcaption>
</figure>
</div>
</div>
</div>
</section>
Quote block with image
A simple quote card with centered image and quotation mark icons.
Many of life's failures are people who did not realize how close they were to success when they gave up.
<section class="vh-100" style="background-color: #eee;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-lg-9 col-xl-7">
<div class="card" style="border-radius: 15px;">
<div class="card-body p-5">
<div class="text-center mb-4 pb-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-quotes/bulb.webp"
alt="Bulb" width="100">
</div>
<figure class="text-center mb-0">
<blockquote class="blockquote">
<p class="pb-3">
<i class="fas fa-quote-left fa-xs text-primary"></i>
<span class="lead font-italic">Many of life's failures are people who did not realize how
close they were to success when they gave up.</span>
<i class="fas fa-quote-right fa-xs text-primary"></i>
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0">
Thomas Edison
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
Quote block with icon
A simple quotebox with a stylized fa fa-quote-left icon.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo @consequat."
<section class="vh-100" style="background-color: #f5f7fa;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-md-9 col-lg-7 col-xl-5">
<div class="card">
<div class="card-body">
<blockquote class="blockquote blockquote-custom bg-white px-3 pt-4">
<div class="blockquote-custom-icon bg-info shadow-1-strong">
<i class="fa fa-quote-left text-white"></i>
</div>
<p class="mb-0 mt-2 font-italic">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo
<a href="#" class="text-info">@consequat</a>."
</p>
<footer class="blockquote-footer pt-4 mt-4 border-top">
Someone famous in
<cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</section>
.blockquote-custom {
position: relative;
font-size: 1.1rem;
}
.blockquote-custom-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -40px;
left: 19px;
}
Square quoteboxes
I have not failed. I've just found 10,000 ways that won't work.
Be less curious about people and more curious about ideas.
<section class="vh-100" style="background-color: #FFE7C7;">
<div class="container py-5 h-100">
<div class="row d-flex align-items-center h-100">
<div class="col col-lg-6 mb-4 mb-lg-0">
<figure class="text-center bg-white py-5 px-4 shadow-2" style="border-radius: .75rem;">
<i class="far fa-gem fa-lg mb-4" style="color: #f9a169;"></i>
<blockquote class="blockquote pb-2">
<p>
<i class="fas fa-angle-double-left" style="color: #f9a169;"></i>
<span class="lead font-italic">I have not failed. I've just found 10,000 ways that won't
work.</span>
<i class="fas fa-angle-double-right" style="color: #f9a169;"></i>
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 font-italic">
Thomas Edison
</figcaption>
</figure>
</div>
<div class="col col-lg-6">
<figure class="text-center bg-white py-5 px-4 shadow-2" style="border-radius: .75rem;">
<i class="far fa-gem fa-lg mb-4" style="color: #f36f63;"></i>
<blockquote class="blockquote pb-2">
<p>
<i class="fas fa-angle-double-left" style="color: #f36f63;"></i>
<span class="lead font-italic">Be less curious about people and more curious about ideas.</span>
<i class="fas fa-angle-double-right" style="color: #f36f63;"></i>
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 font-italic">
Marie Skłodowska Curie
</figcaption>
</figure>
</div>
</div>
</div>
</section>
Quoteboxes
Those quoteboxes are using note classes, from our
typography.
"If it's a good idea, go ahead and do it. It's much easier to apologize than it is to get permission."
"Science and everyday life cannot and should not be separated."
"Science makes people reach selflessly for truth and objectivity; it teaches people to accept reality, with wonder and admiration, not to mention the deep awe and joy that the natural order of things brings to the true scientist."
<section class="vh-100 bg-light">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-lg-10 col-xl-8">
<figure class="note note-primary p-4">
<blockquote class="blockquote">
<p class="pb-2">
"If it's a good idea, go ahead and do it. It's much easier to apologize than it is to get
permission."
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0">
Grace Hopper
</figcaption>
</figure>
<figure class="note note-secondary p-4">
<blockquote class="blockquote">
<p class="pb-2">
"Science and everyday life cannot and should not be separated."
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0">
Rosalind Franklin
</figcaption>
</figure>
<figure class="note note-success p-4">
<blockquote class="blockquote">
<p class="pb-2">
"Science makes people reach selflessly for truth and objectivity; it teaches people to accept
reality, with wonder and admiration, not to mention the deep awe and joy that the natural order
of things brings to the true scientist."
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0">
Lise Meitner
</figcaption>
</figure>
</div>
</div>
</div>
</section>
Quotebox with likes counter
A dark quote card with quotation mark icon on top, and a clickable "like quote" icon on bottom.
Genius is one percent inspiration and ninety-nine percent perspiration.
Thomas Edison
876
<section class="vh-100 bg-light">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-12 col-xl-5">
<div class="card text-white" style="background-color: #1f959b; border-radius: 15px;">
<div class="card-body p-5">
<i class="fas fa-quote-left fa-2x mb-4"></i>
<p class="lead">Genius is one percent inspiration and ninety-nine percent perspiration.</p>
<hr>
<div class="d-flex justify-content-between">
<p class="mb-0">Thomas Edison</p>
<h6 class="mb-0"><span class="badge rounded-pill"
style="background-color: rgba(0,0,0, 0.2);">876</span> <i class="fas fa-heart ms-2"></i>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Grey quote
A simple quote card design with default blockquote
class and a subtle yellow border.
Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.
<section class="vh-100">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-12 col-xl-5">
<figure class="bg-light p-4"
style="border-left: .35rem solid #fcdb5e; border-top: 1px solid #eee; border-right: 1px solid #eee; border-bottom: 1px solid #eee;">
<i class="fas fa-quote-left fa-2x mb-4" style="color: #fcdb5e;"></i>
<blockquote class="blockquote pb-2">
<p>
Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma -
which is living with the results of other people's thinking. Don't let the noise of others'
opinions drown out your own inner voice. And most important, have the courage to follow your
heart and intuition.
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0">
Steve Jobs in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
Colorful quote alerts
These quote template are using our default background colors to resemble toast alerts.
"If it's a good idea, go ahead and do it. It's much easier to apologize than it is to get permission."
"Science and everyday life cannot and should not be separated."
"Science makes people reach selflessly for truth and objectivity; it teaches people to accept reality, with wonder and admiration, not to mention the deep awe and joy that the natural order of things brings to the true scientist."
<section class="vh-100">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-lg-10 col-xl-8">
<div class="card bg-primary text-white rounded-3 mb-3">
<div class="card-body p-4">
<figure class="mb-0">
<blockquote class="blockquote">
<p class="pb-2">
"If it's a good idea, go ahead and do it. It's much easier to apologize than it is to get
permission."
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-white">
Grace Hopper
</figcaption>
</figure>
</div>
</div>
<div class="card bg-success text-white rounded-3 mb-3">
<div class="card-body p-4">
<figure class="mb-0">
<blockquote class="blockquote">
<p class="pb-2">
"Science and everyday life cannot and should not be separated."
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-white">
Rosalind Franklin
</figcaption>
</figure>
</div>
</div>
<div class="card bg-danger text-white rounded-3 mb-3">
<div class="card-body p-4">
<figure class="mb-0">
<blockquote class="blockquote">
<p class="pb-2">
"Science makes people reach selflessly for truth and objectivity; it teaches people to
accept reality, with wonder and admiration, not to mention the deep awe and joy that the
natural order of things brings to the true scientist."
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-white">
Lise Meitner
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
Quote with avatar
Another subtle quote design with an avatar image and the name of the author.
.webp)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur sint nesciunt ad itaque aperiam expedita officiis incidunt minus facere molestias inventore.
<section class="vh-100" style="background-color: #CDC4F9;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-lg-10 col-xl-8">
<div class="card rounded-3">
<div class="card-body p-5">
<div class="d-flex justify-content-center mb-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(28).webp"
class="rounded-circle shadow-1-strong" width="100" height="100" />
</div>
<figure class="text-center mb-0">
<blockquote class="blockquote mb-4">
<p>
<span class="font-italic">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur
sint nesciunt ad itaque aperiam expedita officiis incidunt minus facere molestias
inventore.</span>
</p>
</blockquote>
<figcaption class="blockquote-footer mb-0">
Kate Williams in <cite title="Source Title">Vogue</cite>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>