In this blog post I’ll show how to setup Bootstrap source code files in your ASP.NET application so you can take your CSS to the next level. Bootstrap uses SASS (Sytactically Awesome Style Sheets) to preprocess its source into the final CSS files.
But Why?
The default ASP.NET templates use the pre-built Bootstrap files which work fine until you want to customize the colors, theming and other aspects of your CSS. Building the Bootstrap source in your web project allows you to take full control of Bootstrap and customize it to fit your needs. You can even choose to only include the pieces of Bootstrap you want and leave the rest out.
Prerequisites
You will need an extension to preprocess your SASS. I’m using the Visual Studio IDE so I will use the Web Compiler extension. Install this extension and restart VS before proceeding.
Setup
If your web application source already includes Bootstrap you will want to delete those files. In the standard ASP.NET Core project you can delete the /wwwroot/lib/bootstrap folder.
Now you can add the source files from Bootstrap using the Add Client-Side Library tool. Right click on the project and choose Add | Client-Side Library. Select the unpkg provider, the “bootstrap@4.3.1” library, choose the scss folder and click install.
You should now see the source files at /wwwroot/lib/bootstrap/scss:
Next you can add a bootstrap.custom.scss file to the /wwwroot/css folder with the following contents:
$primary: #0F0; //red
@import “../lib/bootstrap/scss/bootstrap”;
nav.navbar {
background: linear-gradient($primary, $white)
}
Finally, right click the bootstrap.custom.css file and select Web Compiler | Compile file.
You should now see the processed CSS files:
The Web Compiler also added some configuration files to the root of your project which you can use to customize where the outputs are placed.
Usage
Now if you run this project you will see the page is themed in red:
We can change the primary color to “#0F0” and run again to see it in green. Make sure to refresh you browser cache if you don’t see the new color.
Please leave a comment below if you found this blog post helpful and can see how powerful this could be or you have further questions. Example source for this solution is on Github if you want to see it.
Happy SASSing!
Your article is very helpful, thanks very much!
easy to follow and gets me started
Thank you!
Damn. You gave me exactly what I needed, nothing more, nothing less. How did you know I needed that?
Most of my blog posts are documentation that I couldn’t find or wasn’t clear. Glad it helped you as well!
“#0F0; //red”
#0F0 is green 🙂
Yeah, must have changed it at some point and forgot to update the comment.
I know this is obvious but want to get clarified, after the setup, the next step would be to take off the stylesheet reference to bootstrap.css in Development and site.css and just refer to bootstrap.custom.css right?
I just saw the sample project in github.
In refencing the scripts in development section i see the reference to
lib -bootstrap -dist- js -bootstrap.bundle.js
Should i re add the js file folders under bootstrap or add a fallback url to cdn link
I think either is fine. You are less likely to use the wrong version if you use the files under boostrap.
Yes
Awesome, simple explanation of a complicated topic.
Great, thanks for posting!
unfortunately does not work on linux
Yeah, this setup uses Visual Studio tooling which is only available on Windows. If you find a good alternative solution for Linux please share it here.
Great, thanks
When you initially delete the “bootstrap” folder, you also delete the bootstrap.js (and as I understand this is very much needed for bootstrap functions to work). Are you generating this JavaScript file elsewhere or moving the original file to another source before deleting the folder?
Yes, the very next step is to add it back using the Add | Client-Side Library window.
Maybe something has changed? Currently the instructions don’t appear to allow for the .js file being added back.
I too have this confusion. When adding back in Bootstrap and its SCSS should we also check the JS folder too?
Thank you!
Just wanted to give you a huge thanks. I was trying to mesh together my ASP.NET Core MVC (.Net 5) site with Bootstrap’s validation styles and was able to use the information you provided along with the following bit of data from https://stackoverflow.com/questions/48477738/how-to-apply-bootstrap-v4-form-input-validation-classes-with-the-asp-net-razor-s to make it work.
.input-validation-error {
@extend .is-invalid;
}
Just a note that the code to put in the custom scss file has open and close quotation marks instead of standard so if you copy paste the code, replace them.