Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Blockquotes in Bootstrap 5
What are Blockquotes?
Blockquotes are used to set apart quotations from other text. Bootstrap provides styling for blockquotes with optional citations and alignment.
Basic Blockquotes
Basic Blockquote Structure
The only way to do great work is to love what you do.
Innovation distinguishes between a leader and a follower.
Success is not final, failure is not fatal: it is the courage to continue that counts.
<!-- Basic blockquote -->
<blockquote class="blockquote">
<p>Your quote text goes here.</p>
</blockquote>
<!-- With footer/citation -->
<blockquote class="blockquote">
<p>Quote text here.</p>
<footer class="blockquote-footer mt-2">
Author Name in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
<!-- Without margin bottom -->
<blockquote class="blockquote mb-0">
<p>Quote without bottom margin.</p>
</blockquote>Blockquote Alignment
Text Alignment in Blockquotes
Left aligned blockquote (default)
Center aligned blockquote
Right aligned blockquote
Centered with custom styling
<!-- Center aligned --> <blockquote class="blockquote text-center"> <p>Center aligned quote</p> <footer class="blockquote-footer">Author</footer> </blockquote> <!-- Right aligned --> <blockquote class="blockquote text-end"> <p>Right aligned quote</p> <footer class="blockquote-footer">Author</footer> </blockquote> <!-- Responsive alignment --> <blockquote class="blockquote text-center text-md-start text-lg-end"> <p>Responsive alignment</p> <footer class="blockquote-footer">Author</footer> </blockquote>
Styled Blockquotes
Blockquotes with Different Styles
Primary styled blockquote with left border
Success styled blockquote with left border
Blockquote with light background and border
Dark themed blockquote for contrast
Info style with subtle background
Warning style blockquote
Danger style blockquote
<!-- Primary border style --> <blockquote class="blockquote border-start border-primary border-5 ps-3"> <p class="text-primary">Quote text</p> <footer class="blockquote-footer">Author</footer> </blockquote> <!-- Light background style --> <blockquote class="blockquote bg-light p-3 rounded border"> <p>Quote text</p> <footer class="blockquote-footer">Author</footer> </blockquote> <!-- Dark theme --> <blockquote class="blockquote bg-dark text-light p-3 rounded"> <p>Quote text</p> <footer class="blockquote-footer text-light">Author</footer> </blockquote> <!-- With opacity --> <blockquote class="blockquote bg-info bg-opacity-10 p-3 rounded"> <p>Quote text</p> <footer class="blockquote-footer">Author</footer> </blockquote>
Blockquotes with Icons
Quotes with Decorative Icons
"A well-styled blockquote with decorative opening quote mark.
Center aligned with quote icon above
Blockquote with positioned icon
Inverted blockquote with quote mark
Flex layout with quote icon beside text
<!-- With decorative quote mark -->
<blockquote class="blockquote position-relative ps-5">
<span class="position-absolute start-0 top-0 display-6 text-primary opacity-50">"</span>
<p class="ps-3">Quote text</p>
<footer class="blockquote-footer">Author</footer>
</blockquote>
<!-- With Bootstrap Icons -->
<blockquote class="blockquote text-center">
<i class="bi bi-quote display-6 text-secondary opacity-50 d-block mb-3"></i>
<p>Quote text</p>
<footer class="blockquote-footer">Author</footer>
</blockquote>
<!-- With positioned icon -->
<blockquote class="blockquote border-start border-5 border-success ps-3 position-relative">
<i class="bi bi-chat-quote-fill text-success position-absolute"
style="top: 0; left: -12px; font-size: 1.5rem;"></i>
<p>Quote text</p>
<footer class="blockquote-footer">Author</footer>
</blockquote><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">Nested Blockquotes
Complex Quote Structures
Main quotation discussing an important topic.
Nested quotation providing additional context or supporting evidence.
Continuation of the main quotation after the nested quote.
Article with Multiple Quotes
Article introduction text here...
First important quote from the article content.
More article content between quotes...
Second significant quote supporting the argument.
Nested quote within the second quote for additional reference.
Conclusion of the article...
<!-- Nested blockquotes -->
<blockquote class="blockquote">
<p>Main quote text</p>
<blockquote class="blockquote mt-3 ms-3">
<p>Nested quote text</p>
<footer class="blockquote-footer">
Nested source
</footer>
</blockquote>
<p>More main quote text</p>
<footer class="blockquote-footer">
Main source
</footer>
</blockquote>
<!-- In article context -->
<article>
<p>Article text...</p>
<blockquote class="blockquote my-3">
<p>Quote from article</p>
<footer class="blockquote-footer">
Citation
</footer>
</blockquote>
<p>More article text...</p>
</article>Blockquotes in Cards
Testimonial Cards
"Excellent service! The team went above and beyond to deliver exactly what we needed."
<div class="card">
<div class="card-body text-center">
<img src="avatar.jpg" class="rounded-circle" alt="Customer">
<blockquote class="blockquote">
<p class="fst-italic">"Testimonial text..."</p>
<footer class="blockquote-footer mt-3">
<strong>Customer Name</strong>
<span class="text-muted">Position</span>
</footer>
</blockquote>
</div>
</div>Quote Cards with Stats
The future belongs to those who believe in the beauty of their dreams.
<div class="card">
<div class="card-header d-flex justify-content-between">
<span>Featured Quote</span>
<span class="badge">#1</span>
</div>
<div class="card-body">
<blockquote class="blockquote mb-4">
<p>Quote text...</p>
<footer class="blockquote-footer">Author</footer>
</blockquote>
<div class="d-flex justify-content-between small">
<span>Likes count</span>
<span>Date</span>
<span>Status</span>
</div>
</div>
</div>Accessibility Considerations
Accessibility Best Practices for Blockquotes
- Semantic markup: Always use
<blockquote>element - Citations: Use
<cite>for source titles - Screen readers: Blockquotes are announced as quotes
- Visual indicators: Ensure quotes are visually distinct
- Source attribution: Always credit the original source
- Contrast: Maintain sufficient color contrast
Responsive Blockquotes
Responsive Borders
Responsive padding on left border
Responsive Text Size
Text size changes responsively
<!-- Responsive padding --> <blockquote class="blockquote border-start border-5 ps-2 ps-md-3 ps-lg-4"> <p>Quote text</p> <footer class="blockquote-footer">Author</footer> </blockquote> <!-- Responsive text size --> <blockquote class="blockquote"> <p class="fs-6 fs-md-5 fs-lg-4">Quote text</p> <footer class="blockquote-footer fs-6">Author</footer> </blockquote> <!-- Responsive alignment --> <blockquote class="blockquote text-center text-md-start"> <p>Center on mobile, left on desktop</p> <footer class="blockquote-footer">Author</footer> </blockquote>
