Example source for this solution is on Github if you want to see it.Visual Studio has very nice Code Snippet facility built into it and over the years I've been using it to create a ton of useful expansion snippets that make my day to day development easier. 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. Make sure to refresh you browser cache if you don’t see the new color. We can change the primary color to “#0F0” and run again to see it in green.

Now if you run this project you will see the page is themed in red: 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. You should now see the processed CSS files: $primary: #0F0 “./lib/bootstrap/scss/bootstrap” īackground: linear-gradient($primary, $white)įinally, right click the file and select Web Compiler | Compile file. Next you can add a file to the /wwwroot/css folder with the following contents: You should now see the source files at /wwwroot/lib/bootstrap/scss: Select the unpkg provider, the library, choose the scss folder and click install. Right click on the project and choose Add | Client-Side Library. Now you can add the source files from Bootstrap using the Add Client-Side Library tool. In the standard ASP.NET Core project you can delete the /wwwroot/lib/bootstrapfolder. If your web application source already includes Bootstrap you will want to delete those files. Install this extension and restart VS before proceeding. I’m using the Visual Studio IDE so I will use the Web Compiler extension. You will need an extension to preprocess your SASS.

You can even choose to only include the pieces of Bootstrap you want and leave the rest out. Building the Bootstrap source in your web project allows you to take full control of Bootstrap and customize it to fit your needs.

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. Bootstrap uses SASS ( Sytactically Awesome Style Sheets) to preprocess its source into the final CSS files. 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.

Visual studio 2019 bootstrap