Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Partes da configuração não estão mais, tipo a seta

Referente ao curso Bootstrap 4: criando uma landing page responsiva, no capítulo Adicionando o carrossel e resolvendo bugs e atividade Interpretando as classes do carrossel

por Layla Vitória Varjão Freitas
| 91.9k xp | 36 posts

Boa tarde, percebi que a versão que eu utilizei do bootstrap é mais nova, e que algumas partes do html estão diferentes. Porém tentei fazer como o da professora e deu errado, então retornei para o meu. Só que as setas sumiram. O que precisa fazer para que fique certo?

obs: eu tive que adicionar essa parte no início do curso, porque quando tentava testar a navbar para responsiva a imagem já fornecida no html não deixava a página responsiva correta. Então consertei assim:

  <style>
      img {max-width:100%; }
  </style>
4 respostas
por Layla Vitória Varjão Freitas
| 91.9k xp | 36 posts
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>fruta e fruto</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="src/style.css">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">fruta $ fruto</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" aria-current="page" href="#">Ínicio<span class="sr-only"></span></a>
          <a class="nav-item nav-link" href="#">Receitas</a>
          <a class="nav-item nav-link" href="#">Quem somos</a>
          <a class="nav-item nav-link" href="#">Contato</a>
        </div>
      </div>
    </div>
  </nav>

  <style>
      img {max-width:100%; }
  </style>

  <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2">
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="src/img/carrossel-img1.jpg" class="d-block w-100 imagem-carrossel-um" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h1>Reaproveite melhor os alimentos!</h1>
        </div>
      </div>
      <div class="carousel-item">
        <img src="src/img/carrossel-img2.jpg" class="d-block w-100 imagem-carrossel-dois" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h1>Economize e ganhe em saúde!</h1>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>

  <h2>Receitas para economizar e ganhar saúde</h2>
  <h2>Nossas receitas ajudam você a aproveitar melhor os alimentos, economizar, ganhar tempo e praticidade</h2>

  <img src="src/img/receita-abacate.jpg" alt="tigela com salada de abacate, vista superior">
  <h3>Tigela de abacate</h3>
  <p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>

  <img src="src/img/receita-kiwi.jpg" alt="tigela de mingau com kiwi, vista superior">
  <h3>Salada de kiwi</h3>
  <p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>

  <img src="src/img/receita-mix.jpg" alt="prato com mix de vegetais e mão de pessoa adicionando azeite, vista superior">
  <h3>Mix de vegetais</h3>
  <p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>

  <img src="src/img/receita-pimentoes.jpg" alt="prato de salada de pimentões com alguns ingredientes ao lado, vista superior">
  <h3>Pimentões à Juliana</h3>
  <p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>

  <img src="src/img/receita-oriental.jpg" alt="tigela com salada de vegetais estilo oriental, vista de cima">
  <h3>Prato oriental</h3>
  <p>Receita refrescante e cheia de vitaminas para o seu café da manhã!</p>

  <img src="src/img/receita-beterrabas.jpg" alt="tigela com beterrabas e dentes de alho assados em primeiro plano, com ingredientes ao fundo">
  <h3>Beterrabas assadas</h3>
  <p>Receita refrescante e cheia de vitaminas para o seu café da manhã! </p>
  <p>contato:<a href="mailto:email@frutafruto.com.br">email@frutafruto.com.br</a></p>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

  <script src=""></script>

</body>
</html>
por Layla Vitória Varjão Freitas
| 91.9k xp | 36 posts

MEU CSS

.imagem-carrossel-um {
    object-fit: cover;
    object-position: 0 80%;
    height: 400px;
}

.imagem-carrossel-dois {
    object-fit: cover;
    /*object-position: 0 80%;*/
    height: 400px;
}
por Layla Vitória Varjão Freitas
| 91.9k xp | 36 posts

![](MINHA PAG )

solução!
por Lorena Garcia
| 8826k xp | 13160 posts
Alura Scuba Team Suporte Educacional

Oi Layla, tudo bem?

Para que tudo dê certinho igual o curso, você precisa usar a mesma versão da instrutora, que é o Bootstrap4, você precisa se basear por essa documentação linkada.

Tudo que estiver no seu projeto do Boostrap5 precisa ser trocado para o Boostrap4.

Por exemplo os links de importação:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

E os scripts colocados antes do fechamento da tag <body>:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Aqui no repositório do GitHub do projeto você pode comparar todo o seu código com o da instrutora.

Um abraço e bons estudos.