easy change bootstrap colors Primary / secondary

Hi,

Thanks for reaching out.

Bootstrap's primary / secondary come from the compiled CSS, so the quickest way is to override them. Go to System → Site Template Styles → your template → Custom Code → Custom CSS (or add it to /templates/YOUR_TEMPLATE/css/custom.css) and paste this, swapping in your own hex values:

:root{
  --bs-primary:#5b8db8; --bs-primary-rgb:91,141,184;
  --bs-secondary:#000; --bs-secondary-rgb:0,0,0;
  --bs-link-color:#5b8db8; --bs-link-hover-color:#46718f;
}
.btn-primary{
  --bs-btn-bg:#5b8db8; --bs-btn-border-color:#5b8db8;
  --bs-btn-hover-bg:#46718f; --bs-btn-hover-border-color:#46718f;
  --bs-btn-active-bg:#46718f; --bs-btn-active-border-color:#46718f;
  background-color:#5b8db8; border-color:#5b8db8;
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background-color:#46718f;border-color:#46718f}
.btn-secondary{
  --bs-btn-bg:#000; --bs-btn-border-color:#000;
  --bs-btn-hover-bg:#222; --bs-btn-hover-border-color:#222;
  background-color:#000; border-color:#000;
}
.btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active{background-color:#222;border-color:#222}
.text-primary{color:#5b8db8!important} .bg-primary{background-color:#5b8db8!important}
.text-secondary{color:#000!important} .bg-secondary{background-color:#000!important}
a{color:#5b8db8} a:hover{color:#46718f}

Clear your Joomla cache afterwards.

Two notes:

• The template's Presets tab changes the general colour scheme (background, text, links), but not Bootstrap's primary/secondary classes — you still need the CSS above for those.
• If the buttons are inside SP Page Builder pages, they use the addon's own colour settings. For those, set up reusable colours in SP Page Builder → Settings → Color Library: https://www.joomshaper.com/documentation/sp-page-builder/color-library

Best regards,

Did that help?

Hello,

Hope you are doing well.

There is an Accept button below each reply. You can accept an answer there to officially close the post.

Thanks!