How to Create Block Quotes with Bootstrap CSS?

Bootstrap is framework helps to create web layouts and there are many free and premium themes available using Bootstrap grid layout. Besides using the complete framework you also can add individual Bootstrap elements like block quotes on your website. In this article let us discuss how to create block quotes with Bootstrap CSS framework.

View the demo by clicking on the view demo button. And the CSS / HTML for the block quotes can be downloaded  by clicking the on the “Download CSS / HTML Code” button below.





The CSS code is to be added under the “Header” section of the required page and the HTML code is to be added on the “Body” section of the page.

CSS for Bootstrap Style Block Quotes

Though individual elements of Bootstrap are attractive, generally site owners do not use Bootstrap CSS framework since it will break the other elements by overlapping with the theme’s main stylesheet. The problem can be easily solved by only using the style of the required element or replicating 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.

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 blockquote style as below, the primary color used in Bootstrap framework is #c97e69.

<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>

The “blockquote p” and “blockquote .small” classes are used to style the text and the author name inside the block quote respectively.

The block quote on a web page with the above CSS will look something like below:

Related:  How to Add and Verify Site in Yandex Webmaster Tools?
Basic Bootstrap Blockquote
Basic Bootstrap Blockquote

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;
}

Offer: Get 92% discount of Mobirise Bootstrap site builder.

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 with the below HTML code.

<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:

Bootstrap Blockquote with Custom Style
Bootstrap Blockquote with Custom Style

By making different combination you can create six different styles of block quotes as shown in the above demo.





Recommended Articles:

Leave a Comment