رنگ‌ های کاستوم بوت استرپ درست اپدیت نمیشن

سلام بوت استرپ به خوبی از کاستوم سازی پشتیبانی میکنه، ولی بعضی وقتا ممکنه به خاطر نحوه استفاده یا تنظیمات غلط تغییرات رنگ درست اعمال نشه.مطمئن شو که فایل CSS کاستوم بعد از فایل‌ های بوت استرپ ایمپورت شده. ترتیب ایمپورت فایل‌ها تو HTML مهمه و ممکنه اگر فایل CSS سفارشی بعد از بوت استرپ ایمپورت نشه، تغییرات اعمال نشه.

<!-- Load Bootstrap CSS first -->
<link href="path/to/bootstrap.min.css" rel="stylesheet">
<!-- Load custom CSS afterwards -->
<link href="path/to/custom.css" rel="stylesheet">

اگر از Sass استفاده میکنی، مطمئن شو که تغییرات تو فایل Sass درست اعمال شده و فایل CSS نهایی  درست کامپایل شده. متغیرها باید قبل از وارد کردن فایل‌ های بوت استرپ تغییر داده بشن.

// Change Bootstrap variables before importing Bootstrap
$primary: #ff5733;
@import '~bootstrap/scss/bootstrap';

اگر تغییرات هنوز هم اعمال نمیشن، ممکنه به به خاطر اولویت پایین‌تر CSS باشه. میتونی با  !important روی ویژگی‌ های CSS، تغییرات رو اجباری کنی. البته استفاده از !important باید به طور محدود و به عنوان آخرین راه‌ حل باشه.

.btn-primary {
  background-color: #ff5733 !important;
  border-color: #ff5733 !important;
}

بعضی اوقات مرورگر کش شده و تغییرات جدید رو نشون نمیده. مطمئن شو که کش مرورگر رو پاک کنی یا از حالت incognito استفاده کنی.

مطمئن شو که سلکتور ها در CSS درست تعریف شدن و تداخلی با سایر استایل‌ ها ندارن. استفاده از سلکتور های خاص‌ تر ممکنه کمک کنه.

.btn-custom {
  background-color: #ff5733;
}