Bootstrap 5Content

Bootstrap 5 Blockquote

The Bootstrap 5 Blockquote component is a styled HTML <blockquote> element used to highlight quoted text from an third-party source, a person, or a document. It pairs with the .blockquote class and an optional .blockquote-footer for attribution. Use it when you need to visually separate a notable quote, testimonial, or cited passage from surrounding body content.

Primary Class

.blockquote

Common Use Cases

→Displaying a customer testimonial on a product or service landing page, attributed to a named reviewer with their company or role
→Citing a statistic or finding from a research report inside a blog post, with the source credited in the footer
→Highlighting a key quote from an interview or case study to break up long-form content and draw the reader's attention
→Pulling a standout line from a terms-of-service or legal document to emphasise a critical clause before the full paragraph

Variants & Classes

Variant	Description	Classes
Blockquote Default	Standard blockquote with Bootstrap's default styling.	`blockquote`
Blockquote Responsive	Responsive variant that adapts to different screen sizes.	`blockquote blockquote-responsive`

Code Example

<figure class="mb-4">
  <blockquote class="blockquote">
    <p>Switching to a static HTML stack cut our page load time by 60% and eliminated our hosting costs almost entirely.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Sarah Okonkwo, <cite title="Meridian Digital Agency">Meridian Digital Agency</cite>
  </figcaption>
</figure>

Live Examples

Basic Blockquote

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated blockquote with custom colours
✓Blockquote with interactive states
✓Responsive blockquote for all screen sizes

Best Practices

Wrap in <figure> for semantic correctness

Bootstrap 5's own docs recommend placing <blockquote> inside a <figure> element and using <figcaption class="blockquote-footer"> for attribution — this is semantically correct HTML5 and improves accessibility for screen readers.

Use text alignment utilities to control layout

Add Bootstrap utilities like text-center or text-end directly to the wrapping <figure> to align both the quote and its footer — this avoids writing custom CSS and keeps the component fully responsive.

Adjust font size with fs- utilities

The .blockquote class sets font-size to 1.25rem by default. If that's too large for your layout, override it with a utility like fs-5 or fs-6 on the <blockquote> element without touching any CSS files.

Don't skip the <cite> tag inside the footer

Wrapping the source name inside <cite> within .blockquote-footer is both semantically meaningful and gives you a distinct hook for styling the source separately from the attribution label using CSS or a custom class.

FAQ

What is the difference between .blockquote and a plain HTML <blockquote>?

A bare <blockquote> has minimal browser-default styling — typically just indentation. Adding the .blockquote class from Bootstrap 5 increases the font size to 1.25rem, removes the default margin-inline, and sets a clean typographic style that integrates with your Bootstrap theme. The .blockquote-footer class adds the em-dash prefix, reduces the font size to 80%, and applies a muted colour using --bs-secondary-color, all of which a plain blockquote won't give you.

How do I customise the colour or border of a Blockquote to match my brand?

Bootstrap 5 doesn't add a left border to blockquotes by default, but you can add one using border utilities such as border-start border-4 border-primary on the <blockquote> element, combined with ps-3 for padding. To change the text colour, use Bootstrap's text colour utilities like text-primary or text-dark, or override the --bs-body-color CSS custom property in your root styles. For the footer muted colour, target .blockquote-footer directly in your CSS and set the color property.

How does Canvas Builder handle Blockquote components?

When you prompt Canvas Builder to include a testimonial, pull quote, or cited excerpt, it generates a semantically correct <figure> + <blockquote class="blockquote"> + <figcaption class="blockquote-footer"> structure automatically. It wires the footer's colour and the optional left-border accent to your project's active Bootstrap theme colours, so the output matches your brand palette without any manual CSS edits.