How to Create Custom Bootstrap Block Quote Widgets?

Bootstrap is one of the popular free framework that helps to create beautiful web layouts. There are many free and premium themes available using Bootstrap grid layout. In addition to using the complete framework, you can also add individual Bootstrap elements on your website. In this article let us discuss how to create Bootstrap block quotes with different styles.

Learn how to create block quotes in Weebly and WordPress.

Common Challenge in Using Bootstrap Widgets

Bootstrap offers many individual elements as attractive widgets like progress bars and tables. However, you need the framework CSS and JavaScript to use those widgets. Most of the site owners do not use Bootstrap as they use other content management systems like Weebly or WordPress. Inserting Bootstrap CSS will break the other elements by overlapping with the theme’s main stylesheet.

You can overcome this problem by only using the style of the required widget. Alternatively, you can replicate the Bootstrap element’s style to your own custom style. We will also create the block quotes by referring only the required CSS classes without using the entire “bootstrap.min.css” stylesheet.

Bootstrap Block Quotes Widget

You need to download the CSS / HTML and insert the code on your website for creating block quote widgets. Different website builders and content management systems offer different methods to insert HTML/CSS code. For example, you can use Embed Code element on Weebly while Custom HTML block in WordPress Gutenberg editor. If you are using HTML or Bootstrap site, add CSS code under “Header” section and HTML code in “Body” section of the page.

Components of Bootstrap Block Quote Widgets

Each block quote contains two components:

• Quote text and
• Reference or author text

With these two things we can play around with borders, background and colors. First let us create a simple block quote style as below. We use the same primary color #c97e69 used in Bootstrap framework.

CSS for Bootstrap Style Block Quotes

Here is a complete CSS for the widgets. We have provided the code within style tags. If your HTML page already contains style tags, make sure to remove them from the code.

<style>
blockquote {
border: 1px solid #b3b3b3;
border-left: 10px solid #b3b3b3;
border-radius: 0px;
background: #fafafa;
font-size: 18px;
margin: 10px;
padding: 10px 20px;
}

blockquote p {
margin: 0;
line-height: 30px;
padding-bottom: 20px;
}

blockquote .small {
display: block;
font-size: 80%;
color: brown;
text-align: right;
} 
</style>

We have used the “blockquote p” and “blockquote .small” classes to style text and author name respectively. The block quote on a web page with the above CSS should look something like below (let us explain HTML part later).

Keeping this as a basic style, we can add five more styles with different background colors, borders and alignments.

blockquote.bg-gray {
background: #555555;
border: 1px solid #b3b3b3;
border-left: 10px solid #b3b3b3;
color: #ffffff;
}

blockquote.bg-primary {
background: #c97e69;
border: 1px solid #c97e69;
border-left: 10px solid #c97e69;
color: #ffffff;
}

blockquote.primary {
border: 1px solid #c97e69;
border-left: 10px solid #c97e69;
}

blockquote.right.primary {
border-color: #c97e69;
border-left: 1px solid #c97e69;
border-right: 10px solid #c97e69;
}

blockquote.right {
text-align: right;
border-width: 1px 10px 1px 1px;
}

HTML for Bootstrap Block Quotes

Now that we have all required CSS and time to play with HTML by combining different classes. For example, you can create a block quote with gray background and primary border color as #c97e69. Below is the HTML code for that widget:

<blockquote class="bg-gray primary">
<p>
<em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</em>
</p>
<small>Someone famous in
<cite title="Source Title">Source Title</cite>
</small>
</blockquote>

The output will look like below:

By making different combinations, you can create six different styles of block quotes as shown in the below.