How to Create Custom Bootstrap Block Quote Widgets ?
In this article, we are going to implement Bootstrap Block Quote Widgets with the use of Bootstrap classes. We will use Bootstrap to style the blockquote. Blockquote is used to indicate the quotation of a large section of text from another source.
Final Output
Prerequisites
Approach
In this program, we used blockquote and styled it with the help of bootstrap classes. We added classes like blockquote, bg-success, text-light, p-3, m-3, border, border-5, and border-danger to style the blockquote. These classes will help to provide styling to blockquote.
Syntax
<blockquote> <p> Your text here... </p> </blockquote>
Example: This example illustrates the basic implementation for creating the Block Quote in HTML & Bootstrap.
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 text-center" > < h1 class = "text-success" >w3wiki</ h1 > < h3 > How to Create Custom Bootstrap Block Quote Widgets? </ h3 > < br > < figure > <!-- Bootstrap 5 blockquote class used --> < blockquote class="blockquote bg-success text-light p-3 m-3 border border-5 border-danger"> < 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
Contact Us