0
respostas

Erro ao colocar Bootstrap no Base.html

Olá, pessoal!

Estou fazendo o projeto Alura Space e encontrei um problema ao adicionar o Bootstrap no arquivo base.html. Assim que eu incluo o link do Bootstrap no <head>, aparece uma faixa branca embaixo das imagens da galeria, e os cards perdem parte do estilo original do projeto.

Percebi que isso acontece por causa de conflitos entre as classes de CSS do Bootstrap (especialmente .card) e as classes do projeto, mas não tenho certeza qual seria a forma recomendada para corrigir isso sem quebrar o layout.

Seguem os detalhes:

  • O Bootstrap está sendo carregado assim:

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    
  • Quando removo o Bootstrap, o layout volta ao normal.

  • Com o Bootstrap, aparece a faixa branca e o card perde o estilo.

Poderiam me orientar sobre qual a melhor prática para usar Bootstrap nesse projeto sem causar conflito?!
Foto do problema

Obrigado desde já!