Elements
These modular elements can be readily used and customized across pages and in different blocks.
Default Blockquotes <> show code
<blockquote class="blockquote">
<p class="mb-0">“ Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”</p>
</blockquote>
<blockquote class="blockquote text-right">
...
</blockquote>
<blockquote class="blockquote blockquote-bubble">
<p class="mb-0 blockquote-bubble-content">“ Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”</p>
</blockquote>
<div class="blockquote-footer">
<img src="..." alt="" class="img-circle mr-1">
<div class="info">
<span class="name">John Smith</span> <br>
<span class="designation">Web Designer</span>
</div>
</div>
<!-- blockquote with bubble -->
<blockquote class="blockquote text-right blockquote-bubble">
...
</blockquote>
<!-- blockquote with bubble in right alignment -->
<div class="blockquote-footer text-right">
...
</div>
How to use
- Add the class .blockquote to <blockquote> elements to implment the default simnple styling
- For the right aligned blockquote use .text-right with .blockquote
- Add the class .blockquote-bubble to the <blockquote> element and the class .blockquote-bubble-content to any inner element to make the quote display like a speach bubble.
- For the right aligned blockquote footer use .text-right with .blockquote-footer
Example
“ Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”
“ Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”
Blockquotes Testimonial With Bubble
“ Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”
Web Designer
“ Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”
Web Designer
Customized Testimonials <> show code
<blockquote class="blockquote blockquote-bubble quote2">
<p class="mb-0 blockquote-speech triangle-right">“ Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”</p>
<span class="arrow-down"></span>
</blockquote>
<div class="blockquote-footer footer2">
<img src="..." alt="john" class="img-circle mr-1">
<div class="info">
<span class="name text-primary">John Smith</span> <br>
<span class="designation">Web Designer</span>
</div>
</div>
<!-- With Background Image -->
<div class="testimonial_holder bg-image">
<blockquote class="blockquote blockquote-bubble quote2">
<p class="mb-0 blockquote-speech ">“ Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”</p>
<span class="arrow-down"></span>
</blockquote>
<div class="blockquote-footer footer2">
<img src="img/home/cl1.jpg" alt="john" class="img-circle mr-1">
<div class="info">
<span class="name text-primary">John Smith</span> <br>
<span class="designation">Web Designer</span>
</div>
</div>
</div>
How to use
- To Get the Following example style use .quote2 wrapper for <blockquote>
- For Image background image use .bg-image wrappers and put all the contents inside it.
Example
Testimonials With Bubble
“ Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”
Web Designer
“ Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”
Web Designer
Testimonials With Background Image
“ Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”
Web Designer
“ Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”
Web Designer