Как заполнить карусель с помощью jsp

Question

Я заполняю карусель картами начальной загрузки, используя forstach для JSTL. Проблема в том, что карты должны заполнять карусель по горизонтали, что на самом деле происходит, когда создается только один [карусельный элемент] и в нем есть несколько карт по вертикали.

Вот код: Примечание: не делайтене беспокойтесь об «активном» элементе карусели.

<div class="top-content">
<div class="container-fluid">
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<div class="carousel-inner row w-100 mx-auto" role="listbox">

<c:forEach var="laptop" items="${laptops}">

  <div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
  <div class="card mb-2">
   <img class="card-img-top" src="{laptop.picture}">
   <div class="card-body">
   <h4 class="card-title">{laptop.itemTitle}</h4>
   <p class="card-text">Information about the item.</p>
   <a class="btn btn-primary">Button</a>
  </div>
  </div>
  </div>

</c:forEach>
</div>

<!--  The rest is the next and the previous buttons -->