As we all know that we have to override the Bootstrap style to give a new look to our website. Otherwise, it will look common by overriding we can change its default theme-background, fonts, colors, spacing, etc. variables. So here we have to override default Bootstrap variables(as variables are responsible for the output).To do so we need bootstrap locally to do that. We need the raw source code behind bootstrap the SASS code and we can easily get that by installing it as a local dependency using NPM(nodes package manager) and you get it automatically when installing Nodejs. Now just follow the steps given below to overwrite :
-
Step 1: Go to your project and open your terminal or command line and then type command. Basically, this command put this project under control of npm .
$ npm init -y
-
Step 2: Install modules/packages using command. After this, you will see a new folder named node_modules and inside that folder, there will be a bootstrap folder and inside that, you will see a folder named SASS.
$ npm install bootstrap--save
Now DONT do the changes in that SASS folder because that will not work as your program will not be compiled or you edited here it won’t affect the compiled and finished CSS code and additionally, you don’t touch this because if you ever need to reinstall your project and reinstall that dependency then you’ll overwrite your changes. So to tackle this we follow the next step
-
Step 3: Create your own custom sass file. let us make a file named as main.scss. Then import all bootstrap scss files in your main.scss file using command
@import "node_modules/bootstrap/scss/bootstrap";
now from your terminal type command to execute your file.
$ sass main.scss main.css;
Now, this will give you your main.css file which is way bigger now because now it includes the entire bootstrap package. Now you can remove your old CDN bootstrap tags from your index.html file.
-
Step 4: Now you can simply over write your default values in main.scss file all you have to do is write commands like
$theme-colors: ( "primary": #521751, "danger": #b80c03 );
When overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files. So, we have to write code above our
@import "node_modules/bootstrap/scss/bootstrap";
Now when we write our code above our imported Bootstrap Sass file we can re-execute. And once this finishes, you can see the changes.
$ sass main.scss main.css;
Example: I have installed node -modules/packages and created my own main.scss file now let given code below as our main code say index.html.
<!DOCTYPE html> <html>
<head>
<title>Page Title</title>
<link rel="stylesheet"
href=
integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
</head>
<body>
<button type="submit" class="btn btn-primary">Submit</button>
</body>
</html>
</html>
|
As we have included bootstrap values in it so after applying changes in our main.scss file that will reflect in our final output
$theme-colors: ( "primary": #521751,
"danger": #b80c03
); @import "node_modules/bootstrap/scss/bootstrap";
|
Output:
-
Before making changes in main.scss:
-
After making changes and re-executing:
$ sass main.scss main.css;