Entrar Ainda não tem acesso?
1
resposta

Desafio: Flexbox e Breakpoints

Referente ao curso Bootstrap5: crie uma landing page responsiva, no capítulo Flexbox e ícones no Bootstrap e atividade Desafio: Flexbox e Breakpoints

por Estanislau Antonio da Silva Junior
| 73.7k xp | 261 posts

Html

<section class="pb-4">
  <h2 class="text-center">Conheça todas as nossas facilidades</h2>

  <div class="d-flex flex-column flex-lg-row align-items-center justify-content-center gap-3 px-3">
    
    <div class="divs-facilidades d-flex align-items-center">
      <div><i class="bi bi-x-diamond fs-1"></i></div>
      <div>
        <div class="ms-3 mb-1">PAGUE PELO PIX</div>
        <div class="texto-menor ms-3">Ganhe 5% OFF em pagamentos via PIX</div>
      </div>
    </div>

    <div class="divs-facilidades d-flex align-items-center">
      <div><i class="bi bi-arrow-repeat fs-1"></i></div>
      <div>
        <div class="ms-3 mb-1">TROCA GRÁTIS</div>
        <div class="texto-menor ms-3">Fique livre para trocar em até 30 dias.</div>
      </div>
    </div>

    <div class="divs-facilidades d-flex align-items-center">
      <div><i class="bi bi-flower1 fs-1"></i></div>
      <div>
        <div class="ms-3 mb-1">SUSTENTABILIDADE</div>
        <div class="texto-menor ms-3">Moda responsável, que respeita o meio ambiente.</div>
      </div>
    </div>

  </div>
</section>

Css

.texto-menor{
    font-size:13px;
}

.divs-facilidades{
    width: 325px;
}

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

1 resposta
por Rafaela Petelin Silvério
| 1691.4k xp | 3844 posts
Alura Scuba Team

Oi, Estanislau! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Ficou bem legal como você usou d-flex, flex-column e flex-lg-row para alternar o layout entre mobile e telas maiores, além do gap-3 e do align-items-center para manter os cards de facilidades bem alinhados com os ícones. Uma dica interessante para o futuro é usar flex-wrap para evitar que a largura fixa (width: 325px) force quebras estranhas quando o espaço mudar; veja este exemplo:


<div class="d-flex flex-column flex-lg-row flex-wrap justify-content-center gap-3 px-3">
  <div class="d-flex align-items-center p-2">...</div>
  <div class="d-flex align-items-center p-2">...</div>
  <div class="d-flex align-items-center p-2">...</div>
</div>

Esse código usa flex-wrap para permitir que os itens quebrem de linha quando faltar espaço, mantendo o alinhamento e o gap sem precisar depender tanto de um tamanho fixo.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema