"Quote Block"
Bootstrap 4.0.0 Snippet by Manunuu

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <div class="container"> <div class="row"> <div class="container"> <blockquote class="quote-card"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <cite> Lorem I psum </cite> </blockquote> <blockquote class="quote-card blue-card"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis vero! </p> <cite> Lorem </cite> </blockquote> <blockquote class="quote-card green-card"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque at, architecto culpa sint veniam temporibus!! </p> <cite> Lorem ipsum </cite> </blockquote> <blockquote class="quote-card red-card"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque at, architecto culpa sint veniam temporibus!!architecto culpa sint veniam temporibus!! </p> <cite> Lorem ipsum dolor </cite> </blockquote> <blockquote class="quote-card yellow-card"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea tempora quia praesentium vitae ratione corporis similique, recusandae incidunt beatae, quae vel magni repellat commodi modi unde suscipit debitis labore odit! </p> <cite> Ipsum dolor </cite> </blockquote> </div> </div> </div>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic); body { background: #eee; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; } .container { max-width: 800px; margin:10px auto; } .text-center { text-align: center; } .quote-card { background: #fff; color: #222222; padding: 20px; padding-left: 50px; box-sizing: border-box; box-shadow: 0 2px 4px rgba(34, 34, 34, 0.12); position: relative; overflow: hidden; min-height: 120px; } .quote-card p { font-size: 22px; line-height: 1.5; margin: 0; max-width: 80%; } .quote-card cite { font-size: 16px; margin-top: 10px; display: block; font-weight: 200; opacity: 0.8; } .quote-card:before { font-family: Georgia, serif; content: "“"; position: absolute; top: 10px; left: 10px; font-size: 5em; color: rgba(238, 238, 238, 0.8); font-weight: normal; } .quote-card:after { font-family: Georgia, serif; content: "”"; position: absolute; bottom: -110px; line-height: 100px; right: -32px; font-size: 25em; color: rgba(238, 238, 238, 0.8); font-weight: normal; } @media (max-width: 640px) { .quote-card:after { font-size: 22em; right: -25px; } } .quote-card.blue-card { background: #0078FF; color: #ffffff; box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24); } .quote-card.blue-card:before, .quote-card.blue-card:after { color: #5FAAFF; } .quote-card.green-card { background: #00970B; color: #ffffff; box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24); } .quote-card.green-card:before, .quote-card.green-card:after { color:#59E063 ; } .quote-card.red-card { background: #F61E32; color: #ffffff; box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24); } .quote-card.red-card:before, .quote-card.red-card:after { color:#F65665 ; } .quote-card.yellow-card { background: #F9A825; color: #222222; box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24); } .quote-card.yellow-card:before, .quote-card.yellow-card:after { color: #FBC02D; }

Related: See More


Questions / Comments:

does also work with 3.x.x

AdventureStudio () - 2 years ago - Reply 0