<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <blockquote cite="aa"> Don't compare yourself with others. There's no Comparison between The Sun & The Moon. They shine when it's their Time. visit for Demo Link </blockquote>

blockquote { margin: 1.5em 10px; font-style: italic; text-transform: capitalize; color: #888; border: 1px solid #27ae60; border-radius: 3px; background: rgba(1, 255, 36, 0.058823529411764705); border-left: 4px solid #e06666; padding: 10px; } blockquote:before { position: absolute; top: 0em; left: 50%; transform: translate(-50%, -50%); background: #fff; width: 3rem; height: 2rem; font: 6em/1.08em 'PT Sans', sans-serif; color: #666; text-align: center; } blockquote:after { content: "\2013 \2003" attr(cite); display: block; text-align: right; font-size: 0.675em; color: #e74c3c; text-align: center; }