Erro ao colocar Bootstrap no Base.html | Django: autenticação de formulários e alerta

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

Olá, Victor! Como vai?

Quando você adiciona o Bootstrap ao seu projeto, ele traz consigo estilos padrão que podem entrar em conflito com os estilos que você já definiu. Aqui estão algumas sugestões para resolver esse problema:

Especificidade do CSS: Certifique-se de que os estilos personalizados do seu projeto tenham maior especificidade que os estilos do Bootstrap. Isso pode ser feito adicionando classes ou IDs mais específicos ao seu CSS personalizado.

Ordem de carregamento: Garanta que o seu arquivo CSS personalizado seja carregado após o Bootstrap. Isso fará com que seus estilos sobrescrevam os estilos do Bootstrap. Por exemplo:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link href="caminho/para/seu/estilo.css" rel="stylesheet">

Customização do Bootstrap: Se você está usando apenas algumas partes do Bootstrap, pode considerar a customização do Bootstrap para incluir apenas os componentes que você precisa. Isso pode ser feito através de ferramentas como o Bootstrap Customizer ou usando um pré-processador como o SASS.
Override de Estilos: Se o problema for apenas com alguns componentes, você pode sobrescrever os estilos específicos do Bootstrap que estão causando problemas. Por exemplo, se a classe .card está causando problemas, você pode redefinir os estilos dela no seu CSS:
```
.card {
    /* Seus estilos personalizados aqui */
}
```
Uso de Namespaces: Outra abordagem é encapsular seus estilos em um namespace para evitar conflitos. Isso pode ser feito adicionando uma classe pai ao seu HTML e definindo seus estilos dentro desse contexto.

Espero que essas dicas ajudem a resolver o problema. Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.