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=
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=
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