BootstrapHow-ToBeginner · 3 min read

How to Use Blockquote in Bootstrap: Syntax and Examples

In Bootstrap, use the <blockquote> element with the class blockquote to style quoted text. Add blockquote-footer inside it to show the source or author of the quote.

📐

Syntax

The basic syntax uses the <blockquote> tag with the Bootstrap class blockquote to style the quote. Inside, you can add a <footer> with class blockquote-footer to show the quote's source or author.

blockquote.blockquote: Styles the quote block.
footer.blockquote-footer: Displays the source or author in smaller, italic text.

html

<blockquote class="blockquote">
  <p>This is a simple blockquote example.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Output

This is a simple blockquote example. Someone famous in Source Title

💻

Example

This example shows a styled blockquote with a quote and its source using Bootstrap classes.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Blockquote Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <blockquote class="blockquote">
      <p class="mb-0">The only limit to our realization of tomorrow is our doubts of today.</p>
      <footer class="blockquote-footer">Franklin D. Roosevelt</footer>
    </blockquote>
  </div>
</body>
</html>

Output

The only limit to our realization of tomorrow is our doubts of today. Franklin D. Roosevelt

⚠️

Common Pitfalls

Common mistakes include forgetting to add the blockquote class, which means the quote won't get Bootstrap's styling. Another is missing the blockquote-footer class on the footer, so the source text looks plain and not italicized. Also, avoid placing the footer outside the blockquote tag.

html

<!-- Wrong: Missing blockquote class -->
<blockquote>
  <p>This quote has no Bootstrap styling.</p>
</blockquote>

<!-- Right: Correct usage -->
<blockquote class="blockquote">
  <p>This quote is styled by Bootstrap.</p>
  <footer class="blockquote-footer">Author Name</footer>
</blockquote>

📊

Quick Reference

Element/Class	Purpose
	Wraps the quote and applies Bootstrap styling
	Contains the quoted text
	Shows the quote's source or author in styled text
	Optional tag inside footer to cite the source title

✅

Key Takeaways

Always add the class 'blockquote' to the

tag for Bootstrap styling.

Use 'blockquote-footer' class inside

Keep the footer inside the blockquote element to maintain correct structure and styling.

Bootstrap blockquotes are simple to use and improve the visual presentation of quotes.

Link Bootstrap CSS properly to see the styled blockquote in your webpage.