🔥 4 formas simples de customizar o Bootstrap
Tags: css, braziliandevs, webdev, beginners
Published: 2023-10-31 17:46:33

Nesse artigo vou mostrar as diversas técnicas de customização dos temas do Bootstrap, seja pra projetos que usam apenas CSS como projetos que usam Sass.

## Sumário
- [Meu projeto usa só HTML e CSS](#htmlecss)
  - [Estou usando Bootstrap 5](#htmlecssbs5)
  - [Estou usando Bootstrap 4](#htmlecssbs4)
    - [Usando CSS moderno](#mod)
- [Meu projeto usa Sass](#sass)
  - [Estou usando Bootstrap 4 ou 5](#sass5)
- [Poderia ser melhor](#better)

<br />

---

<br />

## Meu projeto usa só HTML e CSS <a id="htmlecss" href="#htmlecss">&#128279;</a>
<small>E eu usei um `<link>` pra incluir o `bootstrap.min.css` no meu HTML</small>

&nbsp;

### Estou usando Bootstrap 5 <a id="htmlecssbs5" href="#htmlecss">&#128279;</a>

O Bootstrap na sua versão 5 usa variáveis CSS pra estilizar seus componentes, as variáveis base estão no `:root` e as específicas dos componentes estão declaradas neles. O `.btn-primary`, por exemplo:

```css
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}
```
&nbsp;

Você pode criar suas próprias variáveis CSS representando as novas cores desse tema, lembrando que por mais que sejam muitas variáveis, elas seguem um padrão de repetição.

![Variáveis novas sendo criadas à partir das existentes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgglmohy31iuummpgya7.png)

&nbsp;

Pra isso basta criar uma folha de estilos nova logo abaixo da do Bootstrap, afinal, quando usamos duas versões da mesma classe, o CSS dá preferência pra que é carregada por último:

```html
<!-- Folha de estilos do BS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<!-- Sua folha de estilos -->
<link rel="stylesheet" href="style.css" />
```

&nbsp;

E alterar o valor delas como quiser, mas de preferência usando suas variáveis padrão, assim você consegue replicá-las em outros elementos que usam o mesmo tema.

```css
.btn-primary {
  --bs-btn-color: var(--primary-text-base);
  --bs-btn-bg: var(--primary-bg-base);
  --bs-btn-border-color: var(--primary-border-base);
  --bs-btn-hover-color: var(--primary-text-base);
  /* ... etc ... */
}
```

&nbsp;


### Estou usando Bootstrap 4 <a id="htmlecssbs4" href="#htmlecss">&#128279;</a>

Com CSS puro você pode usar da especificidade pra sobrescrever o conteúdo das classes. As classes do Bootstrap funcionam como classes utilitárias, sem co-dependência, com especificidade de `0.0.1.0`, podendo ser sobrescritas por outra classe declarada mais adiante no código.

> 💡 Caso especificidade ainda seja um mistério pra você, recomendo [esse artigo sobre especificidade e cascata da Amelia Wanttenberger, em inglês](https://2019.wattenberger.com/blog/css-cascade)

&nbsp;

As classes do Bootstrap possuem uma classe base contendo as propriedades comuns a suas variantes e outra contendo propriedades específicas das suas variantes.

{% collapsible Exemplo %}

```css
.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}
```
{% endcollapsible %}

Sabendo disso, você pode criar uma classe com um namespace, ex: `.custom-alert-primary` com estilos sobrescrevendo o tema do `.alert`.

Exemplo:

```html
<div class="alert custom-alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
```

&nbsp;

**◾Usando CSS moderno** <a id="mod" href="#mod">&#128279;</a>

Podemos usar o advento das cascade layers pra separar o Bootstrap e o CSS em camadas diferentes, dando mais prioridade pra camada com código autoral.

Abaixo, um exemplo [da Stephanie Eckles usando Bootstrap, em inglês](https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/#defining-cascade-layers)
```css
@layer bootstrap, base, application;

@import url(bootstrap.css) layer(bootstrap);

@layer base {
  body {...}
  .alert {...}
  .btn-primary {...}
}
```

&nbsp;

A prioridade usando `@layer` é definida pela ordem, da esquerda pra direita, do menos prioritário ao mais prioritário, fazendo com que a especificidade dos estilos que você fez sejam sempre maiores do que as do Bootstrap.

CSS Layers tem uma compatibilidade global de 93%, [segundo dados do Caniuse](https://caniuse.com/css-cascade-layers).

| <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au2ph8juz4l6gu8m6v99.png" width="18" height="18" alt="chrome" /> | <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc95bmrx1ic1yv2ufxnp.png" width="18" height="18" alt="edge" /> | <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnv0yb558uyvttyxnsz7.png" width="18" height="18" alt="firefox"/> | <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae4m3sedx2hcpf5nkr0a.png" width="18" height="18" alt="safari"/> |
| --- | --- | --- | --- |
| 99 | 99 | 97 | 15.4 |

<br />

---

<br />


## Meu projeto usa Sass <a id="sass" href="#sass">&#128279;</a>
<small>E eu usei `@import "bootstrap"` pra configurar o Bootstrap</small>

&nbsp;

### Estou usando Bootstrap 4 ou 5 <a id="sass5" href="#sass5">&#128279;</a>

No capítulo [Customize &rarr; Variable Defaults da documentação do Bootstrap 5](https://getbootstrap.com/docs/5.3/customize/sass/#variable-defaults) mostra que é possível redeclarar variáveis de configuração do arquivo `variables.scss` diretamente no seu arquivo de importação (geralmente `index.scss`). O procedimento é o mesmo pra Bootstrap 4, porém com a ressalva de conferir na documentação da sua versão quais variáveis estão declaradas e como.

```scss
// Requerido
@import "../node_modules/bootstrap/scss/functions";

/* Sobrescreve os valores padrão das variáveis padrão */
$body-bg: #000;
$body-color: #111;

@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

/* Remove do objeto $theme-colors do arquivo
variables.scss as chaves de 'info', 'light' e 'dark' */
$theme-colors: map-remove($theme-colors, "info", "light", "dark");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Componentes opcionais
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
```

&nbsp;

Pra customização, as variáveis declaradas no código fonte do Bootstrap são marcadas pela flag `!default`. Isso significa que se você declarar uma variável do Bootstrap **antes** do `variables.scss`, ela não será sobrescrita, deixando a sua alteração como valor padrão.

> A flag `!default` permite que uma variável seja criada apenas se ela ainda não existir, pra mais detalhes, [leia o trecho sobre na documentação do Sass, em inglês](https://sass-lang.com/documentation/variables/#default-values).

<br />

---

<br />


## Poderia ser melhor <a id="better" href="#better">&#128279;</a>
<small>Nossa, mas dá mais trabalho que Tailwind !?</small>

Sim, definitivamente, porém são casos de uso diferentes. O Bootstrap é usado por [21% dos sites mapeados pela W3Techs](https://w3techs.com/technologies/details/js-bootstrap), com mais de [6 milhões de downloads semanais, segundo o site do npm](https://www.npmjs.com/package/bootstrap). Quando surgiu em meados de 2011 Bootstrap foi basilar pra uma série de padrões e conceitos que mudaram a forma como fazemos front-end hoje.

Por encontrarmos Bootstrap em sites de HTML e CSS puro, em páginas de Wordpress em PHP ou em SPAs feitas com frameworks modernos, o foco do desenvolvimento do Bootstrap como framework foi **retrocompatibilidade e robustez**.

Não é viável incluir uma etapa de compilação como Tailwind faz com PostCSS pois isso tornaria o projeto dependente de uma _build tool_ como Webpack, Rollup ou até mesmo Vite em todos os projetos, sendo que nem sempre é necessário.

Outro ponto é que apesar de usar Javascript, se suas funcionalidades não forem necessárias, ele é extremamente opt-in, permitindo que o BS seja usado desacoplado de tecnologias, inclusive em projetos de HTML e CSS puros.

Minha opinião pessoal é que dada a dificuldade na customização, se isso for extremamente necessário no seu projeto, se puder, escolha outra tecnologia. O único acoplamento do Bootstrap é com o seu design system, as vezes não irá compensar forçar o seu, caso haja.