How to Create Custom Bootstrap Block Quote Widgets ?

Last Updated : 02 Nov, 2023

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

Screenshot-2023-11-02-173910

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">GeeksforGeeks</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 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>