top of page

Integrate a Bootswatch Theme into an ASP.NET MVC application

bootswatch.png

                              Actually, it is very easy to integrate a Bootswatch theme into an ASP.NET MVC application. Please do the following steps.

​

      1. Go to the compatible version of Bootswatch page, either https://bootswatch.com/ or https://bootswatch.com/3/

      2. Click on the dropdown list called Themes. You can see a variety of Themes like Journal, Lumina, etc.

Bootswatch.png

      3. Select a Theme. For example, select a Theme called Sandstone and click on it. You can see the selected Theme look and feel.

      4. Click on Sandstone dropdown list and select BOOTSTRAP.CSS. 

Bootswatch2.png

      5. Rename Bootstrap.css file to Bootstrap-sandstone.css

Bootswatch3.png

      6. Open your MVC application. Expand the Solution and click on the Content folder and add Bootsrap-Sandstone.css

          file to the Content folder.

Bootswatch1.png

      7. After that, expand App-Start folder and click on the BundleConfig.cs file.

      8. Edit the file as

                          bundles.Add(new StyleBundle("~/Content/css").Include(
                                                     
"~/Content/bootstrap.css",
                                                      "~/Content/site.css"));             

                                                             to

                          bundles.Add(new StyleBundle("~/Content/css").Include(
                                             
"~/Content/bootstrap-sandstone.css",
                                              "~/Content/site.css"));  

 

Bootswatch5.png

      9. Build and run the project. Now you can see that default theme has been changed to SandStone theme.

Bootswatch4.png

Please follow the above simple steps. You can easily add Bootswatch theme for an ASP.NET MVC application. 

bottom of page