Bootstrap 5 Typography Blockquotes
Bootstrap 5 Typography Blockquotes is used to display the long quotations (a section that is quoted from another source). It changes the alignment to make it unique from others. To use this class we must use the HTML blockquote tag for better results.
Typography Blockquotes: For quoting blocks of content, we can add class blockquote.
- Naming a source: Blockquote can be wrapped inside <fiin and provided a footer.
- Alignment: This is similar to the text-alignment class, which is used to set the alignment of the text of blockquote.
Typography Blockquotes Class:
- blockquote: It is used to include the bootstrap 5 blockquote style in the content.
Syntax
<blockquote class="blockquote"> <p>...</p> </blockquote>
Below examples illustrate the Bootstrap 5 Typography Blockquotes:
Example 1: In this example, we will learn about naming a source using blockquote.
HTML
<!DOCTYPE html> < html > < head > <!-- Bootstrap CDN Link --> < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body class = "m-3" > < center > < h1 class = "text-success" > w3wiki </ h1 > < strong >Bootstrap 5 Typography Blockquotes</ strong > </ center > < br > < figure > <!-- Bootstrap 5 blockquote class used --> < blockquote class = "blockquote" > < p > A Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles. </ p > </ blockquote > < figcaption class = "blockquote-footer" > w3wiki </ figcaption > </ figure > </ body > </ html > |
Output:
Example 2: In this example, we will see an example where two figure elements are used, one of them will use bootstrap 5 typography blockquote classes, and another one will be without the classes so you can differentiate the impact of the class.
HTML
<!DOCTYPE html> < html > < head > <!-- Bootstrap CDN Link --> < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body class = "m-3" > < center > < h1 class = "text-success" > w3wiki </ h1 > < strong >Bootstrap 5 Typography Blockquotes</ strong > </ center > < br > < strong >Bootstrap 5 blockquote class used</ strong > < figure > <!-- Bootstrap 5 blockquote class used --> < blockquote class = "blockquote" > < p > A Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles. </ p > </ blockquote > < figcaption class = "blockquote-footer" > w3wiki </ figcaption > </ figure > < br > < strong >Bootstrap 5 blockquote class not used</ strong > < figure > <!-- Bootstrap 5 blockquote class not used --> < blockquote class = "" > < p > A Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles. </ p > </ blockquote > < figcaption class = "" > w3wiki </ figcaption > </ figure > </ body > </ html > |
Output:
References: https://getbootstrap.com/docs/5.0/content/typography/#blockquotes
Contact Us