Bootstrap 5 Typography Blockquotes Naming a source
Last Updated :
15 Dec, 2022
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
Share your thoughts in the comments
Please Login to comment...