Bootstrap quote

Published: 9.5.2019 | Last update: 3.6.2022

Bootstrap comes just with a basic blockquote styling by default.

In today's snippet tutorial, I'll show you how to create your own fancy Bootstrap quote in Bootstrap 4 or 5.

The quote will contain

  • Elegantly styled box with enough whitespace for the quote

  • Rounded quote icon from Font Awesome

  • Footer dedicated to Quote's source

Why display quotes on your website?

Quotes are an important part of a website. They can be used to inspire and motivate the visitor, explain your business philosophy or simply make your website more personal.

But before you start adding quotes to your site, you have to ask yourself if it's necessary at all. If you're a content-based business that relies on visitors reading articles or watching videos, then it might not be the best option for you. However, if you sell something that people need to see in order to understand it (like a product), then quotes are perfect!

The great thing about quotes is that they can be used on any website. You don't have to be selling anything or even have content on your site — just include some quotes in the right places and people will love it!

If you liked this snippet, you might also enjoy exploring Bootstrap file upload or Bootstrap circle buttons .

Please note that the interactive editor on this page should be viewed on your laptop or desktop for the best results.

See my free Bootstrap themes Edit this snippet

How to use the snippet

There are two ways to use the snippet:

  • a] Copy it into your project. This means:
    1. Copy content of the HTML, CSS, JavaScript tabs into your project
    2. Make sure that you have jQuery 3 and Bootstrap 4's CSS and JS included in your project too.
    3. That should be it, and you should be good to go.
  • b] Use the "Edit in JSFiddle" link in the top right and play with it in the JSFiddle. After adjusting what you need, you can use the same steps as in a] to develop it locally.
Share on Facebook Share on Twitter Share on LinkedIn