How to modify blockquote line from Bootstrap 5?
Last Updated :
17 Nov, 2023
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.
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>
<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>
<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>
<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>
<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>
<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>
<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:
Share your thoughts in the comments
Please Login to comment...