"carousel inner content"
Bootstrap 3.3.0 Snippet by imsachin

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <section class="container-fluid imagedemo hidden-xs"> <div class="row"> <div class="container"> <div class="row"> <div class="col-md-5"> <img src="./images/" alt="Image" title="image" class="img-responsive"/> <div class="trust-star pT10 pB10"> <i class="fa fa-star-o fa-2x" aria-hidden="true"></i> <i class="fa fa-star-o fa-2x" aria-hidden="true"></i> <i class="fa fa-star-o fa-2x" aria-hidden="true"></i> <i class="fa fa-star-o fa-2x" aria-hidden="true"></i> <i class="fa fa-star-o fa-2x" aria-hidden="true"></i> </div> <p class="mr0">1 <strong>5</strong> out of <strong>5</strong>55.</p> </div> <div class="col-md-7"> <div id="carousel-trust" class="carousel slide carousel-trust relative" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="carousel-"> <span class="speakerName">William Smith</span> <span class="speakerStar"> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> </span> <span>4 hours ago</span> </div> <p class="userSpeak">“I purchased airline tickets without realizing I chose basic economy instead of standard economy, I callled and spoke to Peter, he was able to save me and corrected my error and still kept my flight ... <a href="#">more</a> </p> </div> <div class="item"> <div class="carousel-"> <span class="speakerName">Smith Doe</span> <span class="speakerStar"> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> </span> <span>5 hours ago</span> </div> <p class="userSpeak">“I purchased airline tickets without realizing I chose basic economy instead of standard economy, I callled and spoke to Peter, he was able to save me and corrected my error and still kept my flight ... <a href="#">more</a> </p> </div> <div class="item"> <div class="carousel-"> <span class="speakerName">John Doe Smith</span> <span class="speakerStar"> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> </span> <span>7 hours ago</span> </div> <p class="userSpeak">“I purchased airline tickets without realizing I chose basic economy instead of standard economy, I callled and spoke to Peter, he was able to save me and corrected my error and still kept my flight ... <a href="#">more</a> </p> </div> <div class="item"> <div class="carousel-"> <span class="speakerName"> Smith William</span> <span class="speakerStar"> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> </span> <span>8 hours ago</span> </div> <p class="userSpeak">“I purchased airline tickets without realizing I chose basic economy instead of standard economy, I callled and spoke to Peter, he was able to save me and corrected my error and still kept my flight ... <a href="#">more</a> </p> </div> </div> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-trust" data-slide-to="0" class="active"></li> <li data-target="#carousel-trust" data-slide-to="1"></li> <li data-target="#carousel-trust" data-slide-to="2"></li> <li data-target="#carousel-trust" data-slide-to="3"></li> </ol> </div> </div> </div> </div> </div> </section> </body> </html>
.imagedemo {background: url(../images/banner2.jpg) center center no-repeat;background-size: cover;padding-top: 20px; padding-bottom: 20px;} .carousel-trust {font-family: 'Lato', sans-serif;} .speakerName {font-size: 16px;font-weight: 700;} .speakerStar {padding: 2px 20px;} .userSpeak {background-color: #fff;padding: 10px 5px;margin-top: 15px; font-style: italic;position: relative;} .userSpeak:before{ content: '';display: block; position: absolute;top:-20px;left:5%;border-top: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #fff;border-left: 10px solid transparent;} .carousel-trust .carousel-indicators {bottom: -14px;right: 0;margin-left: -10%;margin-bottom: 0;text-align: right;} .carousel-trust .carousel-indicators .active {margin: 0 5px;width: 12px;height: 12px;background-color: #143ca1;border: 1px solid #143ca1;} .carousel-trust .carousel-indicators li {width: 12px;height: 12px;border: 1px solid #868383;background-color: #868383;margin: 0 5px;}

Related: See More

Paper Kit 2
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: