"Carousel"
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> <!-- Our Recommendations --> <div class="ourRecommendations"> <div class="container"> <div class="row"> <div class="col-xs-12"> <h2 class="headings mrT20"> Our Recommendations </h2> <p class="text-center"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur animi, suscipit totam et porro repellat minima quibusdam optio sit incidunt rem! Necessitatibus obcaecati inventore eaque facere reiciendis ut repudiandae impedit. </p> </div> </div> <div class="row"> <div id="carousel-recom" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="recomWrap"> <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" alt="Image" title="Project" class="img-responsive width100"> <div class="recomBox"> <h4> Palm Island </h4> <p class="cityS"> Dubai </p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> <p class="descR"> Welcome to the land of monuments and memorials, where authentic essence of American culture touches your soul. </p> <h5> 7 Nights from $500* PP </h5> <button class="btn mybtn"> View Trip </button> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="recomWrap"> <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" alt="Image" title="Project" class="img-responsive width100"> <div class="recomBox"> <h4> Palm Island </h4> <p class="cityS"> Dubai </p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> <p class="descR"> Welcome to the land of monuments and memorials, where authentic essence of American culture touches your soul. </p> <h5> 7 Nights from $500* PP </h5> <button class="btn mybtn"> View Trip </button> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="recomWrap"> <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" alt="Image" title="Project" class="img-responsive width100"> <div class="recomBox"> <h4> Palm Island </h4> <p class="cityS"> Dubai </p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> <p class="descR"> Welcome to the land of monuments and memorials, where authentic essence of American culture touches your soul. </p> <h5> 7 Nights from $500* PP </h5> <button class="btn mybtn"> View Trip </button> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="recomWrap"> <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" alt="Image" title="Project" class="img-responsive width100"> <div class="recomBox"> <h4> Palm Island </h4> <p class="cityS"> Dubai </p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> <p class="descR"> Welcome to the land of monuments and memorials, where authentic essence of American culture touches your soul. </p> <h5> 7 Nights from $500* PP </h5> <button class="btn mybtn"> View Trip </button> </div> </div> </div> </div> <div class="item"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="recomWrap"> <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" alt="Image" title="Project" class="img-responsive width100"> <div class="recomBox"> <h4> Palm Island </h4> <p class="cityS"> Dubai </p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> <p class="descR"> Welcome to the land of monuments and memorials, where authentic essence of American culture touches your soul. </p> <h5> 7 Nights from $500* PP </h5> <button class="btn mybtn"> View Trip </button> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="recomWrap"> <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" alt="Image" title="Project" class="img-responsive width100"> <div class="recomBox"> <h4> Palm Island </h4> <p class="cityS"> Dubai </p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> <p class="descR"> Welcome to the land of monuments and memorials, where authentic essence of American culture touches your soul. </p> <h5> 7 Nights from $500* PP </h5> <button class="btn mybtn"> View Trip </button> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="recomWrap"> <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" alt="Image" title="Project" class="img-responsive width100"> <div class="recomBox"> <h4> Palm Island </h4> <p class="cityS"> Dubai </p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> <p class="descR"> Welcome to the land of monuments and memorials, where authentic essence of American culture touches your soul. </p> <h5> 7 Nights from $500* PP </h5> <button class="btn mybtn"> View Trip </button> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="recomWrap"> <img src="https://bestjquery.com/tutorial/hover-effect/demo147/images/img-2.jpg" alt="Image" title="Project" class="img-responsive width100"> <div class="recomBox"> <h4> Palm Island </h4> <p class="cityS"> Dubai </p> <p class="rateStar"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> </p> <p class="descR"> Welcome to the land of monuments and memorials, where authentic essence of American culture touches your soul. </p> <h5> 7 Nights from $500* PP </h5> <button class="btn mybtn"> View Trip </button> </div> </div> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-recom" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-recom" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div> </body> </html>
/* -- Our Recommendations -- */ .ourRecommendations {margin-bottom: 10px;} .ourRecommendations .headings {text-align: center;color: #ff3d00;margin-bottom: 20px;font-weight: 600;} .ourRecommendations .carousel-control.left, .ourRecommendations .carousel-control.right {background-image:none; width: 50px; height: 50px; top: 40%;color: #012b72; opacity: 1;} .ourRecommendations .carousel-control.left {left: -5%;} .ourRecommendations .carousel-control.right {right: -5%;} .ourRecommendations .recomWrap {text-align: center;box-shadow: 0px 5px 5px #dcdcdc; margin-bottom: 20px;} .ourRecommendations .recomWrap .recomBox {padding: 0 10px 15px 10px;} .ourRecommendations .recomWrap .recomBox h4 {font-size: 24px;} .ourRecommendations .recomWrap .recomBox h5 {font-size: 16px;} .ourRecommendations .recomWrap .recomBox .cityS {font-size: 18px;margin-bottom: 5px;font-weight: 500; color: #ff3d00;} .ourRecommendations .recomWrap .recomBox .rateStar {color: #012b72;} .ourRecommendations .recomWrap .recomBox .descR {text-align: justify;} .ourRecommendations .recomWrap .recomBox .btn {padding: 8px 25px;font-weight: 600;background: none; border: 1px solid #ff3d00;color: #ff3d00;margin-top: 5px;margin-bottom: 5px; border-radius: 20px;} .ourRecommendations .recomWrap .recomBox .btn:hover {background-color: #ff3d00;color: #fff;}

Related: See More

Light Bootstrap Dashboard
Bootstrap 4 Carousel
Carousel with Search
Bootstrap 4 Blog Carousel

Questions / Comments: