Desafio e Quiz: Domine Recursos Avançados do Bootstrap

Tarefa: Criando um Modal Bootstrap

Crie um componente de janela modal do Bootstrap que exiba detalhes do produto. Siga as etapas fornecidas no código inicial para preencher as classes Bootstrap ausentes e completar a estrutura do modal.

• Etapa 1: Criar a estrutura do modal.
  • Aplique a classe modal ao contêiner mais externo;
  • Utilize a classe modal-dialog para a caixa de diálogo;
  • Adicione a classe modal-content para a área de conteúdo;
  • Certifique-se de que o modal esteja centralizado verticalmente na janela de visualização aplicando a classe modal-dialog-centered ao contêiner modal-dialog;
  • Use a classe modal-title para o elemento de título (<h5>);
  • Aplique a classe btn-close ao botão de fechar dentro do cabeçalho do modal.
• Etapa 2: Adicionar detalhes do produto.
  • Insira a imagem do produto dentro do corpo do modal e garanta que ela seja redimensionada adequadamente utilizando a classe img-fluid;
  • Exiba o título do produto usando uma tag de título apropriada (<h6>) e aplique a classe modal-title;
  • Forneça uma breve descrição do produto utilizando um elemento de parágrafo (<p>) e aplique a classe modal-text.

1. Utilize as classes de componente modal do Bootstrap para criar a estrutura do modal:
   • Use a classe modal para o contêiner mais externo;
   • Use a classe modal-dialog para a caixa de diálogo;
   • Use a classe modal-content para a área de conteúdo.
2. Centralize o modal verticalmente na janela de visualização utilizando a classe modal-dialog-centered aplicada ao contêiner modal-dialog.
3. Certifique-se de que o título do modal esteja devidamente estilizado aplicando a classe modal-title ao elemento de título (<h5>).
4. Utilize a classe btn-close para o botão de fechar dentro do cabeçalho do modal para garantir estilo e funcionalidade consistentes.
5. Personalize o tamanho do modal aplicando uma das classes de tamanho (modal-lg, modal-xl, etc.) ao contêiner modal-dialog.