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
- Install Sass:
npm install node-sass --save
- Install reactstrap. First bootstrap:
npm install bootstrap --save
. Then reactstrap:npm install --save reactstrap react react-dom
- create your custom bootstrap theme file
src/styles/custom-btsp.scss
and edit as wanted (see theming v4). - add
import './styles/css/custom.scss';
insrc/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";