How can I display dynamically generated carousels in a grid format using Bootstrap4?
Current formation:
https://i.sstatic.net/H3du7.png
I want to showcase multiple carousels containing one or more images in a clean grid layout instead of the current horizontal format. Can this be achieved with Bootstrap4?
Below is the existing code utilizing a jinja template:
{% for track_id, image_path in image_urls.items %}
<div>
<div id="nCarousel" class="carousel slide" data-ride="carousel" data-interval="500">
<div class="carousel-inner">
{% for ip in image_path %}
<!-- <h1> Index: {{ forloop.counter }}</h1> -->
{% if forloop.counter == 1 %}
<div class="carousel-item active">
<img class="d-block w-100" src="{{ ip }}" >
</div>
{% endif %}
<div class="carousel-item">
<img class="d-block w-100" src="{{ ip }}" >
</div>
{{ forloop.length }}
{% endfor %}
</div>
<a class="carousel-control-prev" href="#nCarousel" 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="#nCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
{% endfor %}
<style> .carousel {
width:180px;
height:180px;
}</style>