Blockquotes

Bootstrap an existing CSS component. It provides a blockquotes, this applies a CSS style to a quote or citation from somewhere else, by adding extra margin and a font size to the text, so that it appears differently to the rest of the paragraph text.

If you‘re working on a website, you will at some point need to incorporate a quote from a famous figure, a testimonial from a customer, or a chapter excerpt from a book. In regular HTML the elegant and semantically correct <blockquote> exists, but it‘s rather dull. Bootstrap makes it elegant with next to no effort.

1. The Basic Blockquote

The above example is more like a default blockquote. The following code is used to generate a blockquotes. Wrap the text in a tag and add class name ” .blockquote” to that. Here we explain how you can use bootstrap 5.

HTML

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

(citation?) The concept of convention The definition a community, including the rules for its convening, convention and conduct, a. is based in the traditional reading of a board room conference or a tea time gathering in a drawing room run by a hostess. It is a matter of moderation, restraint and sociability rules, a. could also be a reference to the American public past time or game convention. This claim is often found in the context of film and video game fanzines.

2. Naming the Source (Attribution)

If you want to credit the author or the book the quote came from, Bootstrap uses the <figcaption> element combined with a <figure> wrapper. This keeps the quote and its source semantically linked.

.blockquote-footer: Use this class to style the source line (it usually makes the text smaller and gray).
<cite>: This HTML tag is used to wrap the specific title of a work (like a book or movie).

HTML

<figure>
  <blockquote class="blockquote">
    <p>"Intelligence is the ability to adapt to change."</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Stephen Hawking in <cite title="Source Title">Oxford University Address</cite>
  </figcaption>
</figure>

3. Alignment Options

Blockquotes are by default left aligned. You may also using Bootstrap‘s classnames, to do the following:

Center: Add .text-center to the <figure> or wrapper.
Right: Add .text-end to the <figure> or wrapper.

4. Why Use It?

The most significant advantage to the Bootstrap blockquote is visual hierarchy. It separates out long walls of text, making it more “scannable.” For blog or news sites, or your portfolio page, it offers a simple, clean way to cite someone else‘s writing without having to write your own CSS

Key Takeaways (Simple Words)

Purpose: It makes quotes look professional and distinct from your own writing.
The Tag: Use <blockquote> for the text.
The Class: Always add class="blockquote" or it will look like plain text.
The Footer: Use .blockquote-footer for the author’s name.