Bootstrap 5 Typography Blockquotes Naming a source

Bootstrap 5 Typography Blockquotes Naming a source is used to provide a class for naming the source of a blockquote.

Bootstrap 5 Typography Blockquotes Naming a source Class:

blockquote-footer: This class is used for naming the source.

Bootstrap 5 Typography Blockquotes Naming a source tags:

figure: The <figure> tag in HTML is used to add self-contained content like illustrations, diagrams, photos, or code listing in a document.
figcaption: This tag is used to set the caption.
blockquote: The <blockquote> tag in HTML is used to display long quotations (a section that is quoted from another source).
cite: This tag is generally used to display the content in italic font. Do not forget to use the title attribute.

Syntax:

 <figure>
    <blockquote class="blockquote">
        ...
    </blockquote>
    <figcaption class="blockquote-footer">
        ...
    </figcaption>
</figure>

Example 1: Let's see an example of Typography Blockquotes Naming a source.

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" 
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          crossorigin="anonymous">
</head>

<body class="my-3 mx-5">
    <h1 class="text-success"> 
        GeeksforGeeks
    </h1>
    <h3>Typography Blockquotes Naming a source</h3>
    <br>
    <figure>
        <blockquote class="blockquote">
            <p>GeeksforGeeks is a tech website</p>
        </blockquote>
        <figcaption class="blockquote-footer">
            GFG
        </figcaption>
    </figure>
</body>
</html>

Output:

Example 2: Let's see another example of Typography Blockquotes Naming a source.

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          crossorigin="anonymous">
</head>

<body class="mx-5 my-3">
    <h1 class="text-success"> 
        GeeksforGeeks
    </h1>
    <h3>
        BootStrap 5 Typography Blockquotes Naming a source
    </h3>

    <figure>
        <blockquote class="blockquote">
            <p> Genius is one percent inspiration and
                ninety-nine percent perspiration.
            </p>
        </blockquote>
        <figcaption class="blockquote-footer">
            GFG
        </figcaption>
    </figure>

    <figure>
        <blockquote class="blockquote">
            <p> I have not failed. I've just found 
                10,000 ways that won't work
            </p>
        </blockquote>
        <figcaption class="blockquote-footer">
            GFG
        </figcaption>
    </figure>
</body>
</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/content/typography/#naming-a-source

Bootstrap 5 Typography Blockquotes Naming a source

Explore