🔥 4 formas simples de customizar o Bootstrap

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
  • Estou usando Bootstrap 5
  • Estou usando Bootstrap 4
  • Usando CSS moderno
• Meu projeto usa Sass
  • Estou usando Bootstrap 4 ou 5
• Poderia ser melhor

Meu projeto usa só HTML e CSS 🔗

E eu usei um <link> pra incluir o bootstrap.min.css no meu HTML

Estou usando Bootstrap 5 🔗

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:

.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;
}

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.

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:

<!-- 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" />

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.

.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 ... */
}

Estou usando Bootstrap 4 🔗

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

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

.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;
}

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

Exemplo:

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

◾Usando CSS moderno 🔗

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

@layer bootstrap, base, application;

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

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

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.

99	99	97	15.4

Meu projeto usa Sass 🔗

E eu usei @import "bootstrap" pra configurar o Bootstrap

Estou usando Bootstrap 4 ou 5 🔗

No capítulo Customize → Variable Defaults da documentação do Bootstrap 5 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.

// 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

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.

Poderia ser melhor 🔗

Nossa, mas dá mais trabalho que Tailwind !?

Sim, definitivamente, porém são casos de uso diferentes. O Bootstrap é usado por 21% dos sites mapeados pela W3Techs, com mais de 6 milhões de downloads semanais, segundo o site do npm. 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.