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

Question

[Алекс Кова]

Подскажите, как переписать через свой файл style.css например стиль класса .btn?
В бустрапе 4 просто писал в своем файле .btn{color:pink;} и он перебивал стили бустрапа, а сейчас бутстрап все равно сильнее!
Импортантами издеваться над версткой не хочу

Comments

[Сергей delphinpro]

Открывайте инспектор стилей и смотрите, что там и как перебивается.

[ubuntu-men]

Подключи свой style.css, где ты переопределяешь стиль кнопки .btn, а после файл бутстрапа, тогда important не понадобится

Answer 1

[Иван]

1. Посмотрите порядок подключения стилей.
2. Движки/CMS могут по-своему переключать порядок
3. Посмотрите в инспекторе , где идет сбивка стилей. Что перебивает.

Answer 2

[Сергей delphinpro]

В пятёрке широко используются 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>

Comments

[Алекс Кова]

Да. Но я не хочу бутстрап переписывать. Просто хочу иметь свой цвет определенной кнопки, но при этом, чтобы использовать класс .btn бутсрапа

[Sanes]

Алекс Кова, на то они и переменные.

[Сергей delphinpro]

Алекс Кова, я вам это и показал

<button class="btn my-button">
</button>

[Алекс Кова]

Сергей delphinpro, и эта собака 5я, в четвертом такого не было - считает свои стили более приоритетными, чем мой класс, надо только импортантоим((((((

[Алекс Кова]

у меня верстка ручками! подключен мой файл стилей и бутстрап!

<button class="btn my-red-color">Contact Support</button>

в css своем пишу .my-red-color{color:red;}

а он все равно перечеркнутый и ниже класса btn бутсраповского((((((((((((

[Сергей delphinpro]

Алекс Кова, я вам написал что нужно сделать. В своем файле опишите свои стили, но используйте css переменные.

[Сергей delphinpro]

Алекс Кова,

а он все равно перечеркнутый и ниже класса btn бутсраповского((((((((((((

Такого быть не должно в любом случае. Возможно вы свой файл подключаете выше бутстрапа.
Покажите скрин инспектора с этими стилями.