Set custom colors in Bootstrap: color palettes, global settings, & more!

Programming
,
1

I would like to know if it is possible to override Bootstrap’s default --primary variable by using a <style> tag in the HTML files.

Is it possible to override Bootstrap’s --primary variable by using a <style> tag in the HTML files?

I am using bootstrap 4.0.0 in a project and would like to set a custom color for the .btn-primary class instead of the default --primary variable. To do this, I tried to insert the following snippet of code in the HTML files before or after the <link> tag for the bootstrap.css:

<style>
  :root {
     --primary: #009c68;
  }
</style>

However, I didn’t manage to set a custom color. Is it possible to override Bootstrap’s --primary variable by using a <style> tag in the HTML files?

2

Yes, it is possible to override Bootstrap’s --primary variable by using a <style> tag in the HTML files. However, the code snippet you provided is incorrect. Instead, you should use the following code to override the --primary variable:

<style>
  :root {
     --primary: #009c68;
  }
  .btn-primary {
     background-color: var(--primary);
     border-color: var(--primary);
  }
</style>

This code sets the --primary variable to the desired color and then applies it to the .btn-primary class.