Buenas tengo un Carousel de bootstrap y solo tengo que llenarlo dinamicamente pero no se como hacerlo, debido a que este carousel contiene varias imagenes dentro de 1 item (exactamente 3 imagenes por item), la logica me dice que tengo que llenarlo con un foreach pero no se donde aplicarlo por que si lo aplico adentro del item todas la imagenes estarian en un item y no 3 por item como deberia. Si alguein tiene alguna sugerencia de como proceder estaria muy agradecido de la ayuda.
Aqui el codigo:
<div class="carousel-inner">
<div class="carousel-item active">
<ul id="bloglist" class="row">
<li class="mt-3 col-4 col-md-12">
<div class="cardBlog">
<img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg" alt="CardImg" style="width:100%"> Paginas web
</div>
</li>
<li class="mt-3 col-4 col-md-12">
<div class="cardBlog">
<img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg" alt="CardImg" style="width:100%"> Paginas web
</div>
</li>
<li class="mt-3 col-4 col-md-12">
<div class="cardBlog">
<img src="https://image.shutterstock.com/z/stock-photo-sleeping-disorders-as-a-reason-for-insomnia-293777093.jpg" alt="CardImg" style="width:100%"> Paginas web
</div>
</li>
</ul>
</div>
Como mencione van 3 imagenes por item y no se como indicarle que no me inserte todas las imagenes ahi, la idea es que solo me inserte 3 luego que cree otro item donde inserte otras 3 y asi.