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á!