[Bug] Desafio das Partials atrapalhou a estilização

Sem Bootstrap:

Style.css

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

.btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: #212529;
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: 0.375rem;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 60,153,110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
}

.alert {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border: 1px solid var(--bs-alert-border-color);
    --bs-alert-border-radius: 0.375rem;
    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
}

.alert-primary {
    --bs-alert-color: #084298;
    --bs-alert-bg: #cfe2ff;
    --bs-alert-border-color: #b6d4fe;
}

.alert-danger {
    --bs-alert-color: #842029;
    --bs-alert-bg: #f8d7da;
    --bs-alert-border-color: #f5c2c7;
}

.alert-success {
    --bs-alert-color: #0f5132;
    --bs-alert-bg: #d1e7dd;
    --bs-alert-border-color: #badbcc;
}

Alerta de Login sem estilo

Formulário sem estilo

Cards voltando a funcionar

Também tentei mudar a ordem de chamada do arquivo .css e do link do bootstrap, achando que alterando a prioridade poderia resolver, mas nada. A solução que mais chegou perto foi ter uma base para o app galeria sem bootstrap e outra para o app usuários com bootstrap, porém além de ser uma má prática pois ambos os códigos são quase idênticos, o botão de aviso de "Usuário logado com sucesso!" do index.html continua sem estilo.

Provavelmente é algum erro bem bobo, já que front-end é meu ponto fraco, mas queria por favor saber se alguém consegue enxergar onde estou errando =(

Olá Daniel,

Pelo que entendi, você está enfrentando um problema de estilização ao tentar aplicar o Bootstrap de forma seletiva nos seus templates de login e cadastro, após a reorganização das partials no seu projeto Django. A questão parece ser que, ao incluir o Bootstrap, a estilização dos cards das fotografias é afetada, e ao tentar copiar apenas as classes necessárias do Bootstrap, você não está conseguindo o resultado esperado.

Uma abordagem que você pode tentar é utilizar o Bootstrap de forma condicional. No seu template base.html, você pode verificar qual é a página atual e, com base nisso, decidir se incluirá ou não o CSS do Bootstrap. Por exemplo, você pode adicionar uma variável de contexto que indique se a página atual deve usar o Bootstrap ou não e, então, no template, carregar o CSS condicionalmente.

Algo assim no seu contexto do Django (views.py ou similar):

def minha_view(request):
    # ...
    usar_bootstrap = 'login' in request.path or 'cadastro' in request.path
    return render(request, 'meu_template.html', {'usar_bootstrap': usar_bootstrap})

E no seu template base.html:

{% if usar_bootstrap %}
<link href="caminho/para/bootstrap.css" rel="stylesheet">
{% endif %}

Dessa forma, o Bootstrap só será carregado nas páginas de login e cadastro, evitando interferir com a estilização dos outros componentes do seu site.

Outra coisa importante: certifique-se de que as classes que você copiou do Bootstrap não estão em conflito com outras regras CSS já existentes nos seus estilos personalizados. Isso pode acontecer se houver especificidade maior nas regras do Bootstrap ou se houver alguma propriedade sendo sobrescrita inadvertidamente. E claro, dá para ir dando uma olhada nisso usando o devtools.

Se mesmo assim você continuar com problemas, uma alternativa seria isolar completamente os estilos dos cards das fotografias em um arquivo CSS separado e garantir que eles não sejam afetados pelo Bootstrap, aplicando regras CSS mais específicas ou utilizando metodologias como BEM (Block Element Modifier) para evitar conflitos de estilização.

Espero que essas sugestões te ajudem a resolver o problema. Lembre-se de testar cada mudança em um ambiente de desenvolvimento antes de aplicar em produção.

Espero ter ajudado e bons estudos!

Oi Natan, tentei aplicar a sua solução mas acho que devo ter feito alguma coisa errada, já que ao invés de exibir normalmente o template o django está exibindo o código HTML nas páginas que utilizam o Bootstrap. Fiz da seguinte forma:

views.py do app usuarios:

def login(request):
    form = LoginForms()

    #...

    bootstrap_on = 'login' in request.path
    return render(request, 'usuarios/login.html', {"form": form}, {"bootstrap_on": bootstrap_on})

def cadastro(request):
    form = CadastroForms()

    #...

    bootstrap_on = 'cadastro' in request.path
    return render(request, 'usuarios/cadastro.html', {"form": form}, {"bootstrap_on": bootstrap_on})

base.html (tentei chamando primeiro tanto o bootstrap quanto o css)

{% if bootstrap_on %}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
{% endif %}
<link rel="stylesheet" href="{% static '/styles/style.css' %}">

Resultado no navegador:

Ainda vou tentar as outras soluções, mas já vou registrar a dúvida sobre essa pois acho que essa prática que você propôs pode ser útil em outras ocasiões.

Consegui arranjar uma solução. Na verdade, já tinha achado ela antes mas não tinha percebido o porque não funcionou.

Estava esquecendo de limpar o cache do navegador antes de verificar as estilizações, assim como também estava esquecendo que existem dois arquivos .css no projeto e que eles precisam estar iguais (uma dica pra quem não sabia disso: usar o comando "python manage.py collectstatic" após fazer alguma ateração em setup/static/styles/style.css). Depois de corrigir isso, bastou eu adicionar um !important em todas as propriedades das classes alert-danger e alert-success, o que já corrigiu o problema dos botões que não são mais dependentes do bootstrap pra funcionar.

.alert-danger {
    --bs-alert-color: #842029 !important;
    --bs-alert-bg: #f8d7da !important;
    --bs-alert-border-color: #f5c2c7 !important;
}

.alert-success {
    --bs-alert-color: #0f5132 !important;
    --bs-alert-bg: #d1e7dd !important;
    --bs-alert-border-color: #badbcc !important;
}

Quanto ao conflito dos cards, bastou apenas adicionar uma propriedade background-color ao .card do style.css, já que era essa propriedade da classe do bootstrap que estava dando conflito.

.card {
    border-radius: 10px;
    box-shadow: 0px 10px 10px #00000050;
    color: #FFFFFF;
    margin-bottom: 1.5rem;
    position: relative;
    width: 450px;
    background-color: #7012af;
}

Sensacional, valeu por compartilhar, Daniel!