I'm having a trouble in using the new bootstrap 4, do anyone of you know how to add/insert multiple bootstrap carousel in one single page.

I've search many sites but they only give answers using bootstrap 3. thank you in advance for your help!

I'm having a trouble in using the new bootstrap 4, do anyone of you know how to add/insert multiple bootstrap carousel in one single page.

I've search many sites but they only give answers using bootstrap 3. thank you in advance for your help!

• javascript
• html
• css
• bootstrap-4

• 1 Possible duplicate of How to stack multiple images in Bootstrap 4 carousel – WebDevBooster Commented Mar 3, 2018 at 8:31
• Show some code that you have written, it will help us to solve your problem – Zuber Commented Mar 3, 2018 at 8:36

2 Answers 2

The demo page itself uses multiple carousels. There's nothing special you have to do except define each carousel with a unique id.

This is from the docs:
"Be sure to set a unique id on the .carousel for optional controls, especially if you’re using multiple carousels on a single page."

https://v4-alpha.getbootstrap./ponents/carousel/

<div id="thisShouldBeUniquePerCarousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
   </a>
</div>

You need to give unique IDs to each carousel, for further information you can visit official bootstarp carousel documentation here