How to modify blockquote line from Bootstrap 5?
In this article, we will learn How to modify a blockquote-footer like its width and color. Blockquotes are used to display long quotations (a section that is quoted from another source), It changes the alignment to make it unique from others.
Table of Content
- Using bootstrap color classes like text-*
- Using fs-* classes for modifying font size
- Using Inline CSS
Approach 1: Using bootstrap color classes like text-*
Syntax
<figcaption class="blockquote-footer text-success">
w3wiki
</figcaption>
Example: This example implements the above approach
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 > < h2 class = "text-success" > w3wiki </ h2 > < h2 > How to modify blockquote line from Bootstrap 5? </ h2 > </ 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 text-success"> w3wiki </ figcaption > </ figure > </ body > </ html > |
Output:
Approach 2: Using fs-* classes for modifying font size
Syntax:
<figcaption class="blockquote-footer text-success fs-1">
w3wiki
</figcaption>
Example: This example implements the above approach.
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 > < h2 class = "text-success" > w3wiki </ h2 > < h2 > How to modify blockquote line from Bootstrap 5? </ h2 > </ 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 text-success fs-1"> w3wiki </ figcaption > </ figure > </ body > </ html > |
Output:
Approach 3: Using Inline CSS
Syntax:
<span style="font-size:20px; color:red;">
w3wiki
</span>
Example: This example implements the above approach
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 > < h2 class = "text-success" > w3wiki </ h2 > < h2 > How to modify blockquote line from Bootstrap 5? </ h2 > </ 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" > < span style="font-size:20px; color:red;"> w3wiki </ span > </ figcaption > </ figure > </ body > </ html > |
Output:
Contact Us