How to customize bootstrap 4 in reactjs app with reactstrap dependency?

You should create SCSS file in your project structure. Include defal=ult bootstrap styles using scss import

@import "node_modules/bootstrap/scss/bootstrap";

and after that reassign styles.

But first thing you should to do is adjust your webpack to understand .scss file extensions


Instructions here: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet

  1. Install Sass: npm install node-sass --save
  2. Install reactstrap. First bootstrap: npm install bootstrap --save. Then reactstrap: npm install --save reactstrap react react-dom
  3. create your custom bootstrap theme file src/styles/custom-btsp.scss and edit as wanted (see theming v4).
  4. add import './styles/css/custom.scss'; in src/index.js

Done!

Here is an exemple of my custom-btsp.scss file:

$theme-colors: (
  "primary": #ffb800
);

$btn-border-radius: 3000px;

@import "~bootstrap/scss/bootstrap";