Bootstrap Multiple Items Carousel (several carousel items shown at once) [duplicate]

Question

How do you implement a multiple items carousel in Bootstrap 4? The docs mention about multiple carousels but not a carousel with multiple items.

Answer 1

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

Answer 2

Bootstrap 5 - update 2021

As with earlier versions the best approach is to place multiple slides inside single carousel-item. This can be done using the grid classes...

<div class="carousel-item">
   <div class="row">
     <div class="col">slide 1</div>
     <div class="col">slide 2</div>
     <div class="col">slide 3</div>
     <div class="col">slide 4</div>
   </div>
</div>
<div class="carousel-item">
   <div class="row">
     <div class="col">slide 5</div>
     <div class="col">slide 6</div>
     <div class="col">slide 7</div>
     <div class="col">slide 8</div>
   </div>
</div>

The above code will advance 4 slides at a time. If you want the carousel to advance a single slide at a time, see this question.

Bootstrap 4 - update 2019

I have done this using the Bootstrap 4 grid with separate columns for each carousel item. If you want to advance only one item at a time, the script can be something like this that clones the slides into each carousel item..

(function($) {
    "use strict";
    
    $('.carousel .carousel-item').each(function(){
      var next = $(this).next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));
      
      if (next.next().length>0) {
        next.next().children(':first-child').clone().appendTo($(this));
      }
      else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
      }
    });
    
})(jQuery); 

Mulitple items:
http://codeply.com/go/WEbiqQvGhy

Mulitple items, move one at a time:
http://codeply.com/go/FrzoIEKCdH (Bootstrap 4 alpha)
http://codeply.com/go/3EQkUOhhZz (Bootstrap 4.0.0)

Responsive 3 items on large (1 at a time), 1 item on smaller:
http://codeply.com/go/s3I9ivCBYH

---

Also see: https://stackoverflow.com/a/20008623/171456