"Carousel Rows"
Bootstrap 3.2.0 Snippet by Cyruxx

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <div class="container"> <div class="row"> <div class="col-xs-8 col-xs-offset-2"> <h4>Made with <i class="fa fa-fw fa-heart text-danger"></i> by <a href="http://twitter.com/AlexMahrt" class="btn btn-primary btn-xs" target="_blank"><i class="fa fa-fw fa-twitter"></i> @AlexMahrt</a></h4> </div> </div> <hr> <!-- Begin of rows --> <div class="row carousel-row"> <div class="col-xs-8 col-xs-offset-2 slide-row"> <div id="carousel-1" class="carousel slide slide-carousel" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-1" data-slide-to="0" class="active"></li> <li data-target="#carousel-1" data-slide-to="1"></li> <li data-target="#carousel-1" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://lorempixel.com/150/150?rand=1" alt="Image"> </div> <div class="item"> <img src="http://lorempixel.com/150/150?rand=2" alt="Image"> </div> <div class="item"> <img src="http://lorempixel.com/150/150?rand=3" alt="Image"> </div> </div> </div> <div class="slide-content"> <h4>Example product</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat </p> </div> <div class="slide-footer"> <span class="pull-right buttons"> <button class="btn btn-sm btn-default"><i class="fa fa-fw fa-eye"></i> Show</button> <button class="btn btn-sm btn-primary"><i class="fa fa-fw fa-shopping-cart"></i> Buy</button> </span> </div> </div> </div> <div class="row carousel-row"> <div class="col-xs-8 col-xs-offset-2 slide-row"> <div id="carousel-2" class="carousel slide slide-carousel" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-2" data-slide-to="0" class="active"></li> <li data-target="#carousel-2" data-slide-to="1"></li> <li data-target="#carousel-2" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://lorempixel.com/150/150?rand=4" alt="Image"> </div> <div class="item"> <img src="http://lorempixel.com/150/150?rand=5" alt="Image"> </div> <div class="item"> <img src="http://lorempixel.com/150/150?rand=6" alt="Image"> </div> </div> </div> <div class="slide-content"> <h4>Long text product</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p> </div> <div class="slide-footer"> <span class="pull-right buttons"> <button class="btn btn-sm btn-default"><i class="fa fa-fw fa-eye"></i> Show</button> <button class="btn btn-sm btn-primary"><i class="fa fa-fw fa-shopping-cart"></i> Buy</button> </span> </div> </div> </div> <div class="row carousel-row"> <div class="col-xs-8 col-xs-offset-2 slide-row"> <div id="carousel-3" class="carousel slide slide-carousel" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-3" data-slide-to="0" class="active"></li> <li data-target="#carousel-3" data-slide-to="1"></li> <li data-target="#carousel-3" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://lorempixel.com/150/150?rand=7" alt="Image"> </div> <div class="item"> <img src="http://lorempixel.com/150/150?rand=8" alt="Image"> </div> <div class="item"> <img src="http://lorempixel.com/150/150?rand=9" alt="Image"> </div> </div> </div> <div class="slide-content"> <h4>Example product</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, </p> </div> <div class="slide-footer"> <span class="pull-right buttons"> <button class="btn btn-sm btn-default"><i class="fa fa-fw fa-eye"></i> Show</button> <button class="btn btn-sm btn-primary"><i class="fa fa-fw fa-shopping-cart"></i> Buy</button> </span> </div> </div> </div> </div>
/* FONT AWESOME & not necessary for functions */ @import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'); body { padding-top: 15px; background-color: #f9f9f9; } /*REQUIRED*/ .carousel-row { margin-bottom: 10px; } .slide-row { padding: 0; background-color: #ffffff; min-height: 150px; border: 1px solid #e7e7e7; overflow: hidden; height: auto; position: relative; } .slide-carousel { width: 20%; float: left; display: inline-block; } .slide-carousel .carousel-indicators { margin-bottom: 0; bottom: 0; background: rgba(0, 0, 0, .5); } .slide-carousel .carousel-indicators li { border-radius: 0; width: 20px; height: 6px; } .slide-carousel .carousel-indicators .active { margin: 1px; } .slide-content { position: absolute; top: 0; left: 20%; display: block; float: left; width: 80%; max-height: 76%; padding: 1.5% 2% 2% 2%; overflow-y: auto; } .slide-content h4 { margin-bottom: 3px; margin-top: 0; } .slide-footer { position: absolute; bottom: 0; left: 20%; width: 78%; height: 20%; margin: 1%; } /* Scrollbars */ .slide-content::-webkit-scrollbar { width: 5px; } .slide-content::-webkit-scrollbar-thumb:vertical { margin: 5px; background-color: #999; -webkit-border-radius: 5px; } .slide-content::-webkit-scrollbar-button:start:decrement, .slide-content::-webkit-scrollbar-button:end:increment { height: 5px; display: block; }

Related: See More


Questions / Comments:

Very nice , good work <3

[CorVayne] #TeamExitoso () - 8 years ago - Reply 0


how do i get font-awsome.css ?

aashish bijukchhea () - 8 years ago - Reply 0


[CorVayne] #TeamExitoso () - 8 years ago - Reply 0


My friend you forgot to put the PRICE option ?
Good enough and pic might have been better if you gave some padding inside the box area .

Ardian Hyseni () - 8 years ago - Reply 0


I copied the html and css yet it's not working. only one image change per refresh (unlike the preview).. Any help?

elohi () - 9 years ago - Reply 0


Do you have Bootstrap's JS and CSS in place as well? You can download the full snippet if you are registered and logged in here on Bootsnipp and check what you're missing that way

maxsurguy () - 9 years ago - Reply 0


Is there a way to make the image non-responsive or not scale so small? I tried putting columns in the rows and giving the image a fixed width- but fail. I tried a few other ways and mega fail, the images got even smaller. I would prefer it to be responsive without scaling so small.

elohi () - 9 years ago - Reply 0


Thanks.. I was missing the <script src="http://netdna.bootstrapcdn...."></script>

elohi () - 9 years ago - Reply 0


Wow.....It's so beautiful...Thanks.

Agung Pambudi () - 9 years ago - Reply 0


nice one

ravi kumar () - 9 years ago - Reply 0