Как изменить стили bootstarp 5?

Подскажите, как переписать через свой файл style.css например стиль класса .btn?
В бустрапе 4 просто писал в своем файле .btn{color:pink;} и он перебивал стили бустрапа, а сейчас бутстрап все равно сильнее!
Импортантами издеваться над версткой не хочу
  • Вопрос задан
  • 122 просмотра
Решения вопроса 1
Starina_js
@Starina_js
Веб-программист
1. Посмотрите порядок подключения стилей.
2. Движки/CMS могут по-своему переключать порядок
3. Посмотрите в инспекторе , где идет сбивка стилей. Что перебивает.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
В пятёрке широко используются css переменные. Вовсе не обязательно перебивать многие стили, достаточно переопределить переменную.

https://github.com/twbs/bootstrap/blob/main/scss/_...

.my-button {
  --bs-btn-color: ...;
  --bs-btn-bg: ...;
  --bs-btn-border-color: ...;
  --bs-btn-hover-color: ...;
  --bs-btn-hover-bg: ...;
  --bs-btn-hover-border-color: ...;
  --bs-btn-focus-shadow-rgb: ...;
  --bs-btn-active-color: ...;
  --bs-btn-active-bg: ...;
  --bs-btn-active-border-color: ...;
  --bs-btn-active-shadow: ...;
  --bs-btn-disabled-color: ...;
  --bs-btn-disabled-bg: ...;
  --bs-btn-disabled-border-color: ...;
}


Добавлено:

<button class="btn my-button">
</button>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы