Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Grid do Bootstrap não funciona

Boa noite! Estou realizando o curso Bootstrap 4 (criando uma lading page responsiva) e a minha grid não está ficando semelhante a da instrutora. Já revisei várias vezes e não estou encontrando o problema. No meu caso ficam 4 gris da parte de cima e duas embaixo, mas na verdade deveriam ficar 3 em cima e 3 embaixo. Agradeço desde já pela ajuda. Obrigada!


    <section class="container" id="receitas">
      <div class="row">
        <article class="card borda-cor-especial card-largura col-12 col-md-2">
          <img src="src/img/receita-abacate.jpg" class="card-img-top card-posicao-imagem" alt="tigela com salada de abacate, vista superior">
          <div class="card-body">
            <h5 class="card-title">Tigela de abacate</h5>
            <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
            <a href="#" class="btn botao-cor-especial">Veja a receita</a>
          </div>
        </article>
        <article class="card borda-cor-especial card-largura col-12 col-md-2">
          <img src="src/img/receita-kiwi.jpg" class="card-img-top card-posicao-imagem" alt="tigela de mingau com kiwi, vista superior">
          <div class="card-body">
            <h5 class="card-title">Salada de kiwi</h5>
            <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
            <a href="#" class="btn botao-cor-especial">Veja a receita</a>
          </div>
        </article>
        <article class="card borda-cor-especial card-largura col-12 col-md-2">
          <img src="src/img/receita-mix.jpg" class="card-img-top card-posicao-imagem" alt="prato com mix de vegetais e mão de pessoa adicionando azeite, vista superior">
          <div class="card-body">
            <h5 class="card-title">Mix de vegetais</h5>
            <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
            <a href="#" class="btn botao-cor-especial">Veja a receita</a>
          </div>
        </article>
        <article class="card borda-cor-especial card-largura col-12 col-md-2">
          <img src="src/img/receita-pimentoes.jpg" class="card-img-top card-posicao-imagem" alt="prato de salada de pimentões com alguns ingredientes ao lado, vista superior">
          <div class="card-body">
            <h5 class="card-title">Pimentões à Juliana</h5>
            <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
            <a href="#" class="btn botao-cor-especial">Veja a receita</a>
          </div>
        </article>
        <article class="card borda-cor-especial card-largura col-12 col-md-2">
          <img src="src/img/receita-oriental.jpg" class="card-img-top card-posicao-imagem" alt="tigela com salada de vegetais estilo oriental, vista de cima">
          <div class="card-body">
            <h5 class="card-title">Prato oriental</h5>
            <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
            <a href="#" class="btn botao-cor-especial">Veja a receita</a>
          </div>
        </article>
        <article class="card borda-cor-especial card-largura col-12 col-md-2">
          <img src="src/img/receita-beterrabas.jpg" class="card-img-top card-posicao-imagem" alt="tigela com beterrabas e dentes de alho assados em primeiro plano, com ingredientes ao fundo">
          <div class="card-body">
            <h5 class="card-title">Beterrabas assadas</h5>
            <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
            <a href="#" class="btn botao-cor-especial">Veja a receita</a>
          </div>
        </article>
      </div>
    </section>
1 resposta
solução!

Oi Liliam, tudo bem?

Desculpe a demora em retornar.

Qual a versão você estava utilizando? Lembrando que a versão utilizada no curso é a 4. E para que as instruções da instrutora funcione você precisa usar a mesma versão dela.

Vou mandar aqui o código correto:

<section class="container-fluid bg-light" id="receitas">
    <div class="row justify-content-center">

      <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
      <img class="card-img-top" src="src/img/receita-abacate.jpg" alt="tigela de abacate, vista superior">
        <div class="card-body">
          <h5 class="card-title">Tigela de abacate</h5>
          <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
          <a href="#" class="btn botao-cor-especial">Veja a receita</a>
        </div>
    </article>

      <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
        <img class="card-img-top card-posicao-imagem" src="src/img/receita-kiwi.jpg" alt="tigela de mingau com kiwi, vista superior">
          <div class="card-body">
            <h5 class="card-title">Salada de kiwi</h5>
            <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
            <a href="#" class="btn botao-cor-especial">Veja a receita</a>
          </div>
      </article>

      <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
        <img class="card-img-top card-posicao-imagem" src="src/img/receita-mix.jpg"alt="prato com mix de vegetais e mão de pessoa adicionando azeite, vista superior">
          <div class="card-body">
            <h5 class="card-title">Mix de vegetais</h5>
            <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
            <a href="#" class="btn botao-cor-especial">Veja a receita</a>
          </div>
      </article>

      <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
        <img class="card-img-top card-posicao-imagem" src="src/img/receita-pimentoes.jpg" alt="prato de salada de pimentões com alguns ingredientes ao lado, vista superior">
          <div class="card-body">
            <h5 class="card-title">Pimentões à Juliana</h5>
            <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
            <a href="#" class="btn botao-cor-especial">Veja a receita</a>
          </div>
      </article>

      <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
        <img class="card-img-top card-posicao-imagem" src="src/img/receita-oriental.jpg" alt="tigela com salada de vegetais estilo oriental, vista de cima">
          <div class="card-body">
            <h5 class="card-title">Prato oriental</h5>
            <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
            <a href="#" class="btn botao-cor-especial">Veja a receita</a>
          </div>
      </article>

      <article class="card borda-cor-especial card-largura p-0 m-4 col-12 col-md-4">
        <img class="card-img-top card-posicao-imagem" src="src/img/receita-beterrabas.jpg" alt="tigela com beterrabas e dentes de alho assados em primeiro plano, com ingredientes ao fundo">
          <div class="card-body">
            <h5 class="card-title">Beterrabas assadas</h5>
            <p class="card-text">Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>
            <a href="#" class="btn botao-cor-especial">Veja a receita</a>
          </div>
      </article>
    </div>
  </section>

Um abraço e bons estudos.