"Responsive Quote Carousel"
Bootstrap 3.3.0 Snippet by kimolalekan

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> <!-- Carousel Buttons Next/Prev --> <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a> <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a> </div> </div> </div> </div>
/* Control buttons */ #quote-carousel .carousel-control { background: none; color: #222; font-size: 1.3em; text-shadow: none; margin-top: 30px; } /* Previous button */ #quote-carousel .carousel-control.left { left: -18px; } /* Next button */ #quote-carousel .carousel-control.right { right: -12px !important; } #quote-carousel img { width: 100%; height: 100%; } /* End carousel */ .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

Paper Kit 2 Angular
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)
Bootstrap 4 Carousel

Questions / Comments: