Barra de produtos

Na documentação do Boostraps procure por Carousel.

Ele é o componente responsável por cria slides e vai ajudá-lo a implementar o que tu queres.

Simm, eu estava fazendo usando carrousel, porém enquanto no computador fica 4 produtos por carousel por exemplo, no celular eu preciso que fique menos porque a tela é menor. Enão eu precisaria criar carrouseis diferentes para cada breakpoint?

Neste caso é aplicar responsividade usando o bootstrap.

Use as classes col-sm e col-md em conjunto com as media queries para definir breakpoint.

Na documentação tem tudo explicado com exemplos.

Sim amigo, eu sei, porém vamos supor que eu crie um carrousel que cada item dele exibe 4 produtos. Aí no celular, teria que ter menos produtos por item, entende? Vamos pegar por exemplo o template de carousel do site do bootstrap:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</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>

Imagine que cada "carousel-item" eu teria 4 produtos. Então no celular, por exemplo, teriam 2 produtos por item. Então não somente o estilo css iria mudar, mas o codigo html também. Eu teria que colocar mais itens no carrousel. Somente usando responsividade com as classes do bootstrap não dá. Eu teria que criar dois carrouseis diferentes e usar "d-none d-md-block" em um e "d-md-none" em outro?