"Responsive Quote Carousel"
Bootstrap 3.0.0 Snippet by kinjal9768

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <!-- Head tags to include FontAwesome --> <head> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> </head> <div class="container"> <div class="row"> <div class='col-md-offset-2 col-md-8 text-center'> <h2>Please Give Your Feedback</h2> </div> </div> <div class='row'> <div class='col-md-offset-2 col-md-8'> <div class="carousel slide" data-ride="carousel" id="quote-carousel"> <!-- Bottom Carousel Indicators --> <ol class="carousel-indicators"> <li data-target="#quote-carousel" data-slide-to="0" class="active"></li> <li data-target="#quote-carousel" data-slide-to="1"></li> <li data-target="#quote-carousel" data-slide-to="2"></li> </ol> <!-- Carousel Slides / Quotes --> <div class="carousel-inner"> <!-- Quote 1 --> <div class="item active"> <blockquote> <div class="row"> <div class="col-sm-3 text-center"> </div> <div class="col-sm-9"> <p>The form below contains three radio buttons.</p> <form role="form"> <div class="radio"> <label><input type="radio" name="optradio">Option 1</label> </div> <div class="radio"> <label><input type="radio" name="optradio">Option 2</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio">Option 3</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio">Option 4</label> </div> </form> <div class="row"> <button type="submit" data-slide="next" href="#quote-carousel"> Next </button> </div> </div> </div> </blockquote> </div> <!-- Quote 2 --> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-3 text-center"> </div> <div class="col-sm-9"> <p>The form below contains three radio buttons.</p> <form role="form"> <div class="radio"> <label><input type="radio" name="optradio">Option 1</label> </div> <div class="radio"> <label><input type="radio" name="optradio">Option 2</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio">Option 3</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio">Option 4</label> </div> </form> <div class="row"> <button type="submit" data-slide="next" href="#quote-carousel"> Next </button> </div> </div> </div> </blockquote> </div> <!-- Quote 3 --> <div class="item"> <blockquote> <div class="row"> <div class="col-sm-3 text-center"> <img class="img-circle" src="http://allthingsd.com/files/2011/11/e-commerce_art.png" style="width: 100px;height:100px;"> </div> <div class="col-sm-9"> <p>The form below contains three radio buttons.</p> <form role="form"> <div class="radio"> <label><input type="radio" name="optradio">Option 1</label> </div> <div class="radio"> <label><input type="radio" name="optradio">Option 2</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio">Option 3</label> </div> <div class="radio disabled"> <label><input type="radio" name="optradio">Option 4</label> </div> </form> <div class="row"> <button type="submit" data-slide="next" href="#quote-carousel"> Next </button> </div> </div> </div> </blockquote> </div> </div> <!-- Carousel Buttons Next/Prev --> </div> </div> </div> </div>
/* carousel */ #quote-carousel { padding: 0 10px 30px 10px; margin-top: 30px; } /* Control buttons */ #quote-carousel .carousel-control { background: none; color: #222; text-shadow: none; } /* Previous button */ #quote-carousel .carousel-control.left { left: -12px; } /* Next button */ #quote-carousel .carousel-control.right { } /* Changes the position of the indicators */ #quote-carousel .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px; } /* Changes the color of the indicators */ #quote-carousel .carousel-indicators li { background: #c0c0c0; } #quote-carousel .carousel-indicators .active { background: #333333; } #quote-carousel img { width: 250px; height: 100px } /* End carousel */ .item blockquote { border-left: none; margin: 0; } .item blockquote img { margin-bottom: 10px; } .item blockquote p:before { content: "\f10d"; font-family: 'Fontawesome'; float: left; margin-right: 10px; } /** MEDIA QUERIES */ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { #quote-carousel { margin-bottom: 0; padding: 0 40px 30px 40px; } } /* Small devices (tablets, up to 768px) */ @media (max-width: 768px) { /* Make the indicators larger for easier clicking with fingers/thumb on mobile */ #quote-carousel .carousel-indicators { bottom: -20px !important; } #quote-carousel .carousel-indicators li { display: inline-block; margin: 0px 5px; width: 15px; height: 15px; } #quote-carousel .carousel-indicators li.active { margin: 0px 5px; width: 20px; height: 20px; } }
// When the DOM is ready, run this function $(document).ready(function() { //Set the carousel options $('#quote-carousel').carousel({ }); });

Related: See More

Vue Paper Dashboard
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)
Bootstrap 4 Carousel

Questions / Comments: