finalizei o curso do bootstrap apresentado por Juliana Amoasei, onde é criado uma page responsiva. é criado um modal para a imagem das receitas e um buttom para mostrar os ingredientes. no curso, é feito apenas para a primeira imagem da receita, gostaria de saber como faço para adicionar no outros botões. nessa atividade, eu troquei as receitas por outros nomes e ferramentas.
esses são os modals
<section id="receitas" class="bg-light">
<div class="container pb-5">
<div class="row justify-content-md-around justify-content-center">
<article class="card mt-5 borda-cor-especial card-imagem">
<img src="src/img/ferramentas.png" class="card-imagem-top" alt="Ferramentas">
<div class="card-body">
<h5 class=" text-center text-left card-title">Ferramentas</h5>
<p class=" text-center text-left card-text">Tudo sobre as ferramentas que nosso programa disponibiliza para você.</p>
<a href="#" class="btn btn-cor-especial" data-toggle="modal" data-target="#modal-receita">Mais</a>
</div>
</article>
<article class="card mt-5 borda-cor-especial card-imagem">
<img src="src/img/contábil.png" class="card-imagem-top" alt="Contábil e Fiscal">
<div class="card-body">
<h5 class="text-center card-title">Contábil e Fiscal</h5>
<p class="text-center card-text">Tudo sobre a fiscalização das suas finanças e contabilidade em tempo real.</p>
<a href="#" class="btn btn-cor-especial">Mais</a>
</div>
</article>
<article class="card mt-5 borda-cor-especial card-imagem">
<img src="src/img/frota.png" class="card-imagem-top" alt="Frota">
<div class="card-body">
<h5 class="text-center card-title">Frota</h5>
<p class="text-center card-text">Tudo sobre seu controle sua frota da maneira em que achar melhor, em tempo real.</p>
<a href="#" class="btn btn-cor-especial">Mais</a>
</div>
</article>
<article class="card mt-5 borda-cor-especial card-imagem">
<img src="src/img/interações.png" class="card-imagem-top" alt="Integrações">
<div class="card-body">
<h5 class="text-center card-title">Integrações</h5>
<p class="text-center card-text">Tudo sobre nossas integrações e compatilidade entre o armazenamento dos dados.</p>
<a href="#" class="btn btn-cor-especial">Mais</a>
</div>
</article>
<article class="card mt-5 borda-cor-especial card-imagem">
<img src="src/img/Financeiro.png" class="card-imagem-top" alt="Financeiro">
<div class="card-body">
<h5 class="text-center card-title">Financeiro</h5>
<p class="text-center card-text">Controle seus gastos de maneira simples e eficaz usando nossa ferramenta.</p>
<a href="#" class="btn btn-cor-especial">Mais</a>
</div>
</article>
<article class="card mt-5 borda-cor-especial card-imagem">
<img src="src/img/documentos.png" class="card-imagem-top" alt="Documentos">
<div class="card-body">
<h5 class="text-center card-title">Documentos</h5>
<p class="text-center card-text">Tudo sobre a emissão e logística de sua empresa e forta, automático e dinâmicos.</p>
<a href="#" class="btn btn-cor-especial">Mais</a>
</div>
</article>
</div>
</div>
</section>
