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.
<!DOCTYPE html> <html>
<head>
<!-- Bootstrap CDN Link -->
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="m-3">
<center>
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>Bootstrap 5 Typography Blockquotes</strong>
</center>
<br>
<figure>
<!-- Bootstrap 5 blockquote class used -->
<blockquote class="blockquote">
<p>
A Computer Science portal for geeks. It contains
well written, well thought and well explained computer
science and programming articles.
</p>
</blockquote>
<figcaption class="blockquote-footer">
Geeksforgeeks
</figcaption>
</figure>
</body>
</html>
|
Output:
Bootstrap 5 Typography Blockquotes
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.
<!DOCTYPE html> <html>
<head>
<!-- Bootstrap CDN Link -->
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="m-3">
<center>
<h1 class="text-success">
GeeksforGeeks
</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 geeks. It contains
well written, well thought and well explained computer
science and programming articles.
</p>
</blockquote>
<figcaption class="blockquote-footer">
Geeksforgeeks
</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 geeks. It contains
well written, well thought and well explained computer
science and programming articles.
</p>
</blockquote>
<figcaption class="">
Geeksforgeeks
</figcaption>
</figure>
</body>
</html>
|
Output:
Bootstrap 5 Typography Blockquotes
References: https://getbootstrap.com/docs/5.0/content/typography/#blockquotes