Twitter Bootstrap Responsive Carousel With Multiple Items
You can do this with the bootstrap fluid grid alone, just specify a .container-fluid container along with a .row-fluid row and give each one of your list items housing an image a .span* class, in this case 3 (3*4=12).
.container { margin-top: 10px;}
img{ max-width:100%; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script><link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid"> <div class="row-fluid"> <div class="carousel slide" id="myCarousel"> <div class="carousel-inner"> <div class="item active"> <ul class="thumbnails"> <li class="span3"> <div class="caption"> <h5>Caption</h5> </div> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt="Sample Image"> </div> </li> <li class="span3"> <div class="caption"> <h5>Caption</h5> </div> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt="Sample Image"> </div> </li> <li class="span3"> <div class="caption"> <h5>Caption</h5> </div> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt="Sample Image"> </div> </li> <li class="span3"> <div class="caption"> <h5>Caption</h5> </div> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt="Sample Image"> </div> </li> </ul> </div> <div class="item"> <ul class="thumbnails"> <li class="span3"> <div class="caption"> <h5>Caption</h5> </div> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt="Sample Image"> </div> </li> <li class="span3"> <div class="caption"> <h5>Caption</h5> </div> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt="Sample Image"> </div> </li> <li class="span3"> <div class="caption"> <h5>Caption</h5> </div> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt="Sample Image"> </div> </li> <li class="span3"> <div class="caption"> <h5>Caption</h5> </div> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt="Sample Image"> </div> </li> </ul> </div> <div class="item"> <ul class="thumbnails"> <li class="span3"> <div class="caption"> <h5>Caption</h5> </div> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt="Sample Image"> </div> </li> <li class="span3"> <div class="caption"> <h5>Caption</h5> </div> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt="Sample Image"> </div> </li> <li class="span3"> <div class="caption"> <h5>Caption</h5> </div> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt="Sample Image"> </div> </li> <li class="span3"> <div class="caption"> <h5>Caption</h5> </div> <div class="thumbnail"> <img src="http://placehold.it/260x180" alt="Sample Image"> </div> </li> </ul> </div> </div> <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a> <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a> </div> </div></div>Responsive Carousel With 10 columns and 5 rows infinite items
You have to redesign your Bootstrap as your own criteria. You have to make col-sm-10 = col-sm-12 means col-sm-10 = 100% and then col-sm-2 will be 20%. I have tried to do your work. May be it will help you to solve your problem.
<html>
<head>
<style>
@media (min-width: 768px){
.col-sm-2 {
width: 20.00000%;
}}
@media (min-width: 768px){
.col-sm-10 {
width: 100.000%;
}}
@media (min-width: 768px){
.col-sm-10, .col-sm-2, .col-sm-6{
float: left;
}}
.col-sm-2, .col-sm-10, .col-sm-6{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div {
display: block;
}
.col-sm-6 {
width: 50%;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-10">
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
<div class="col-sm-2">
<img src="http://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
<p>Current Project</p>
</div>
</div>
</div>
</div>
</body>
</html>
See this in here
Bootstrap 5 carousel with multiple items
It looks like you want a Bootstrap carousel.
<section class="pt-5 pb-5">
<div class="container">
<div class="row">
<div class="col-6">
<h3 class="mb-3">Carousel cards title </h3>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2" role="button" data-slide="next">
<i class="fa fa-arrow-right"></i>
</a>
</div>
<div class="col-12">
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532781914607-2031eca2f00d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=7c625ea379640da3ef2e24f20df7ce8d">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1517760444937-f6397edcbbcd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=42b2d9ae6feb9c4ff98b9133addfb698">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532712938310-34cb3982ef74?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3d2e8a2039c06dd26db977fe6ac6186a">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532771098148-525cefe10c23?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=3f317c1f7a16116dec454fbc267dd8e4">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532715088550-62f09305f765?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ebadb044b374504ef8e81bdec4d0e840">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=0754ab085804ae8a3b562548e6b4aa2e">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=ee8417f0ea2a50d53a12665820b54e23">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532777946373-b6783242f211?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=8ac55cf3a68785643998730839663129">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img class="img-fluid" alt="100%x280" src="https://images.unsplash.com/photo-1532763303805-529d595877c5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjMyMDc0fQ&s=5ee4fd5d19b40f93eadb21871757eda6">
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>Bootstrap Multiple Items Carousel (several carousel items shown at once)
You can display one carousel item at a time, but fill it with multiple elements. Something like:
.item
.col-xs-4
{content}
.col-xs-4
{content}
.col-xs-4
{content}
But you may then be wishing you could advance them one at a time. That isn't going to happen with bootstrap right out of the box. After implementing many carousels, I'd recommend seeking another carousel library when Bootstrap's doesn't fit the bill. Slick.js is my go-to lib for lots of carousel config options. And its a fairly slim ~5k min'd and gzipped.
If you're hard-set on using bootstrap, here is a script that can provide single advance, multi-items: http://codepen.io/MarkitDigital/pen/ZpEByz
Related Topics
Bootstrap 3 Navbar Active Li Not Changing Background-Color
Animate the CSS Transition Property Within :After/:Before Pseudo-Classes
What Is the Regex of a CSS Selector
How to Add Padding or Border to a Div and Keep Width and Height
Flexbox Vertically Split Container in Half
CSS :Root Variables and SASS Functions
Css: Background Position with Repeat
Grayscale Image with CSS on Safari 5.X
How to Position a CSS Triangle Using ::After
Edited Chrome Extension - Chrome Thinks It Is Malware
Can You Style the Google Translate Plugin
Responsive Design - Media Query Not Working on Iphone
How to Customize Style of Bootstrap $Modal
Bootstrap - Some Kind of Margin on Mobile Devices (Only Right Side)
Printing Background-Color in Firefox and Ie
Viewport Units, Keeping Aspect Ratio