"Bootstrap 4 Responsive Quote Carousel"
Bootstrap 4.1.1 Snippet by sangrai

Post to Facebook Tweet this

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <head> </head> <div class="container"> <div class="row"> <div class='col-md-10 offset-md-1 text-center mb-5 mt-5'> <h2>Bootstrap 4 Responsive Quote Carousel</h2> </div> </div> <div class='row'> <div class='col-md-10 offset-md-1'> <div class="carousel slide sq-crousal4" data-ride="carousel" id="sq-crousal4"> <!-- Bottom Carousel Indicators --> <ol class="carousel-indicators"> <li data-target="#sq-crousal4" data-slide-to="0" class="active"></li> <li data-target="#sq-crousal4" data-slide-to="1"></li> <li data-target="#sq-crousal4" data-slide-to="2"></li> </ol> <!-- Carousel Slides / Quotes --> <div class="carousel-inner"> <!-- Quote 1 --> <div class="carousel-item active"> <blockquote> <div class="row"> <div class="col-md-10 offset-md-1 d-md-flex d-block text-center text-lg-left"> <img class="rounded-circle" src="https://www.tutorialrepublic.com/examples/images/clients/4.jpg" style="width: 100px;height:100px;"> <div class="feedback-text pl-3"> <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!</p> <small>Someone famous</small> </div> </div> </div> </blockquote> </div> <!-- Quote 2 --> <div class="carousel-item"> <blockquote> <div class="row"> <div class="col-md-10 offset-md-1 d-md-flex d-block text-center text-lg-left"> <img class="rounded-circle" src="https://www.tutorialrepublic.com/examples/images/clients/3.jpg" style="width: 100px;height:100px;"> <div class="feedback-text pl-3"> <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!</p> <small>Someone famous</small> </div> </div> </div> </blockquote> </div> <!-- Quote 3 --> <div class="carousel-item"> <blockquote> <div class="row"> <div class="col-md-10 offset-md-1 d-md-flex d-block text-center text-lg-left"> <img class="rounded-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg" style="width: 100px;height:100px;"> <div class="feedback-text pl-3"> <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!</p> <small>Someone famous</small> </div> </div> </div> </blockquote> </div> </div> <!-- Carousel Buttons Next/Prev --> <!-- Left and right controls --> <a class="carousel-control-prev" href="#sq-crousal4" data-slide="prev"> <span class="fa fa-angle-left"></span> </a> <a class="carousel-control-next" href="#sq-crousal4" data-slide="next"> <span class="fa fa-angle-right"></span> </a> </div> </div> </div> </div>
.sq-crousal4 .carousel-indicators li::before {width: 15px;height: 15px;background: #444;border-radius: 50%; border: solid 2px #AAACAE; transition: all 0.3s ease 0s;box-shadow: 6px 6px 8px #E9E0E0 inset;} .sq-crousal4 .carousel-indicators li.active::before {background: #1870ed;box-shadow: 2px 3px 2px #e5edf8 inset;border-color: #1870ed;} .sq-crousal4 .carousel-indicators {bottom: -40px;} .sq-crousal4 li {width: 20px;} .sq-crousal4 .fa-angle-left {font-size: 45px;color: #444;left: -30px;position: relative;top: -17px;} .sq-crousal4 .fa-angle-right {font-size: 45px;color: #444;right: -30px;position: relative;top: -17px;}

Questions / Comments: