CSS e Variáveis

---

Personalizando com CSS Manual

O método mais simples e direto é sobrescrever os estilos utilizando uma folha de estilos própria.

Exemplo básico:

Copy<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

CSS personalizado (custom.css):

Copybody {
  background-color: #f4f4f4;
}

.btn-primary {
  background-color: #3c3c3c;
  border: none;
}

.navbar {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

O CSS customizado sempre deve ser importado após o Bootstrap para que ele tenha prioridade.

---

Usando Variáveis CSS (Custom Properties)

A partir da versão 5, o Bootstrap disponibiliza boa parte de suas configurações como variáveis CSS diretamente utilizáveis, mesmo sem SASS.

Exemplo — Alterando a cor primária de um elemento:

Copy<div style="--bs-primary: #6f42c1;">
  <button class="btn btn-primary">Botão com nova cor primária</button>
</div>

Isso altera a cor primária apenas dentro deste elemento e seus filhos.

---

Como listar variáveis disponíveis?

Basta inspecionar qualquer elemento no navegador. O Bootstrap define as variáveis diretamente no :root.

Exemplos comuns de variáveis:

---

Exemplo — Alterando múltiplas variáveis:

Copy<div style="
  --bs-primary: #6f42c1;
  --bs-border-radius: 1rem;
">
  <button class="btn btn-primary">Botão Customizado</button>
</div>

---

Alterando Globalmente no Projeto

Para aplicar uma personalização global com variáveis CSS:

Copy:root {
  --bs-primary: #6f42c1;
  --bs-border-radius: .75rem;
  --bs-body-bg: #f8f9fa;
  --bs-body-color: #212529;
}

Basta incluir isso no seu arquivo custom.css.

---

Vantagem de Usar Variáveis CSS

• ✅ Mais leve que sobrescrever seletores inteiros.

• ✅ Permite escopo local (aplica em um bloco específico).

• ✅ Mantém a lógica do Bootstrap funcionando, alterando apenas a aparência.

• ✅ Funciona sem precisar usar SASS.

---

Quando Usar CSS Manual vs. Variáveis?

---

Se desejar um nível mais avançado, o próximo passo seria utilizar o Bootstrap com SASS, que oferece controle total sobre todo o framework, incluindo geração de temas e modificações profundas.