"Responsive Quote Carousel"
Bootstrap 3.3.0 Snippet by tnoetzel

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!-- Head tags to include FontAwesome --> <head> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> </head> <br> <div class="container"> <div class="panel panel-default"> <div class="panel-body"> <div class="carousel" data-ride="carousel" id="quote-carousel"> <!-- Carousel Slides / Quotes --> <div class="carousel-inner"> <!-- Quote 1 --> <div class="item active"> <table class="table"> <tr style="border:none"> <td style="border:none"> <div> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" style="width:50px;height:50px;"> </div> </td> <td style="border:none"> <div> <a href=""><b>Neque porro quisquam est qui dolorem ipsum quia</b></a> <p><smal>2 minutes ago</small></p> </div> </td> </tr> </table> </div> <div class="item"> <table class="table"> <tr style="border:none"> <td style="border:none"> <div> <img src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" style="width:50px;height:50px;"> </div> </td> <td style="border:none"> <div> <a href=""><b>Neque porro quisquam est qui dolorem ipsum quia</b></a> <p><smal>2 minutes ago</small></p> </div> </td> </tr> </table> </div> </div> </div> </div> </div> </div>
.item blockquote { border-left: none; margin: 0; } /** MEDIA QUERIES */ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { #quote-carousel { margin-bottom: 0; padding: 0 40px 0 40px; } }
// When the DOM is ready, run this function $(document).ready(function() { //Set the carousel options $('#quote-carousel').carousel({ pause: true, interval: 4000, }); });

Related: See More

Argon Design System
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)
Bootstrap 4 Carousel

Questions / Comments: