Настройка через CSS-переменные

Bootstrap 5.3 хранит многие свои значения в CSS-переменных (вы знаете их по учебнику) с приставкой --bs-: цвет фона страницы, шрифт, радиус скругления, цвета кнопок. Если переопределить переменную в своём CSS, Bootstrap подхватит новое значение. Ничего не нужно собирать: способ работает и с CDN.

Где писать

Свои стили подключают после Bootstrap. При CDN это отдельный файл style.css рядом с index.html и строка <link href="style.css" rel="stylesheet"> под ссылкой на Bootstrap. В проекте на Vite это src/style.css, который импортируется в main.js после Bootstrap.

/* style.css */
:root {
  --bs-body-font-family: Georgia, serif;
  --bs-border-radius: 1rem;
}

Весь текст страницы сменит шрифт на Georgia, а скругления у кнопок, карточек и полей станут крупнее.

Глобальные переменные

Они объявлены на :root и действуют на всю страницу:

В превью то же самое можно показать тегом <style>:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
  :root {
    --bs-body-bg: #fdf8f0;
    --bs-border-radius: 1rem;
  }
</style>
 
<div class="card" style="max-width: 18rem">
  <div class="card-body">
    <h5 class="card-title">Tasko</h5>
    <button type="button" class="btn btn-primary">Начать</button>
  </div>
</div>

Фон страницы стал кремовым, а углы карточки и кнопки — заметно круглее.

Переменные компонентов

У каждого компонента есть свои переменные: у кнопки --bs-btn-bg, --bs-btn-color, --bs-btn-hover-bg, у карточки --bs-card-bg, --bs-card-border-color. Через них удобно сделать свой вариант кнопки:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
  .btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6f42c1;
    --bs-btn-border-color: #6f42c1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #59359a;
    --bs-btn-hover-border-color: #59359a;
    --bs-btn-active-bg: #4d2e85;
  }
</style>
 
<button type="button" class="btn btn-brand">Фирменная кнопка</button>

Класс btn даёт кнопке форму, а btn-brand — фиолетовые цвета. При наведении кнопка темнеет, как и стандартные.

Частая ошибка

Поменять --bs-primary и ждать, что все синие кнопки станут другого цвета. Кнопки и классы вроде bg-primary используют не эту переменную, а свои: у btn-primary цвет записан в --bs-btn-bg, у bg-primary — в --bs-primary-rgb. Чтобы сменить главный цвет везде сразу, меняют переменную $primary в Sass — это следующий урок.