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" > w3wiki </ h1 > < h3 >Typography Blockquotes Naming a source</ h3 > < br > < figure > < blockquote class = "blockquote" > < p >w3wiki 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" > w3wiki </ 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
Contact Us