Quotes
Bootstrap 5 Quotes component
Responsive Quotes built with the latest Bootstrap 5, HTML & CSS. Various variations of block quotes and quote boxes. Different styles, colors and functionalities.
Basic example
.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" 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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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))
}
Quotes #2
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>
Quotes #3
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://mdbootstrap.com/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>
Quotes #4
"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;
}
Quotes #5
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>
Quotes #6
"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>
Quotes #7
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>
Quotes #8
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>
Quotes #9
"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>
Quotes #10
.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://mdbootstrap.com/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>