Bootstrap Custom Theme in react Application

"Bootstrap" as every developer knows a very popular framework for the CSS and, comes with its build in components, styles and utilities.

Recently I was using bootstrap for one of my react project. but bootstrap comes with its own default styles and I was looking for some mechanism so I can use my own styles or putting into the simple way I can customize the bootstrap styles.

During this process, I figured out the solution, In this post, In a few easy steps I am going to share how you can customize bootstrap.

STEP 1:

Include bootstrap in your application
           

  npm install --save bootstrap

STEP 2:

To customize Bootstrap, create a file called src/custom.scss(decide the place where you want to keep your custom.scss file) and alter the value of the variable you want to customize.

// Override default variables before the import

$primary: #000;

// Import Bootstrap and its default variables

@import '~bootstrap/scss/bootstrap.scss';

You can see all the available variables inside bootstrap\scss\_variables.scss and you can select the one which you want to modify.


STEP 3 :

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

import './customCss/custom.scss';

And its done. Run your react project and see the magic.


Thanks for reading; if you find it useful or something you want to add do comment.

Happy Learning :-)