How to change the primary color of the react built-in bootstrap?

Question

I am using react built-in bootstrap(The one without importing any library and installing extra package) for my website. Right now, I need a customised primary colour. How should I achieve this?

Answer 1

To customize Bootstrap, create a file called src/custom.scss (or similar) and import the Bootstrap source stylesheet. Add any overrides before the imported file(s). You can reference Bootstrap's documentation for the names of the available variables. Bootstrap's documentation: https://getbootstrap.com/docs/4.1/getting-started/theming/#css-variables

For example:

// change the theme
$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';

Finally, import the newly created .scss file instead of the default Bootstrap .css in the beginning of your src/index.js file, for example:

import './custom.scss';

Read more: https://facebook.github.io/create-react-app/docs/adding-bootstrap#using-a-custom-theme