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
Approach 1: Using bootstrap color classes like text-*
Syntax
<figcaption class="blockquote-footer text-success">
Geeksforgeeks
</figcaption>
Example: This example implements the above approach
HTML
<!DOCTYPE html><html>
<head>
<!-- Bootstrap CDN Link -->
<link href=
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="m-3">
<center>
<h2 class="text-success">
GeeksforGeeks
</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 geeks.
It contains well written, well thought
and well explained computer
science and programming articles.
</p>
</blockquote>
<figcaption class="blockquote-footer
text-success">
Geeksforgeeks
</figcaption>
</figure>
</body>
</html>
|
Output:
Approach 2: Using fs-* classes for modifying font size
Syntax:
<figcaption class="blockquote-footer text-success fs-1">
Geeksforgeeks
</figcaption>
Example: This example implements the above approach.
HTML
<!DOCTYPE html><html>
<head>
<!-- Bootstrap CDN Link -->
<link href=
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="m-3">
<center>
<h2 class="text-success">
GeeksforGeeks
</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 geeks.
It contains well written, well thought
and well explained computer
science and programming articles.
</p>
</blockquote>
<figcaption
class="blockquote-footer
text-success fs-1">
Geeksforgeeks
</figcaption>
</figure>
</body>
</html>
|
Output:
Approach 3: Using Inline CSS
Syntax:
<span style="font-size:20px; color:red;">
GeeksforGeeks
</span>
Example: This example implements the above approach
HTML
<!DOCTYPE html><html>
<head>
<!-- Bootstrap CDN Link -->
<link href=
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body class="m-3">
<center>
<h2 class="text-success">
GeeksforGeeks
</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 geeks.
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;">
GeeksforGeeks
</span>
</figcaption>
</figure>
</body>
</html>
|
Output: