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.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur sint nesciunt ad itaque aperiam expedita officiis incidunt minus facere, molestias quisquam impedit inventore.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.

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.

Show code Edit in sandbox

HTML
CSS

<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-button-init data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="0" class="active"
                  aria-current="true" aria-label="Slide 1"></button>
                <button data-mdb-button-init data-mdb-target="#carouselDarkVariant" data-mdb-slide-to="1"
                  aria-label="Slide 1"></button>
                <button data-mdb-button-init 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 data-mdb-button-init 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 data-mdb-button-init 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.

Show code Edit in sandbox

HTML

<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.

Show code Edit in sandbox

HTML

<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."

Someone famous in Source Title

Show code Edit in sandbox

HTML
CSS

<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.

Show code Edit in sandbox

HTML

<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."

Show code Edit in sandbox

HTML

<section class="vh-100 bg-body-tertiary">
  <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

Show code Edit in sandbox

HTML

<section class="vh-100 bg-body-tertiary">
  <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.

Show code Edit in sandbox

HTML

<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-body-tertiary 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."

Grace Hopper

"Science and everyday life cannot and should not be separated."

Rosalind Franklin

"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."

Lise Meitner

Show code Edit in sandbox

HTML

<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.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur sint nesciunt ad itaque aperiam expedita officiis incidunt minus facere molestias inventore.

Show code Edit in sandbox

HTML

<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>

Quotes

Bootstrap 5 Quote component

Quote carousel

Blockquotes

Quote block with image

Quote block with icon

Square quoteboxes

Quoteboxes

Quotebox with likes counter

876

Grey quote

Colorful quote alerts

Quote with avatar

Related resources