How to Integrate a Bootswatch Theme into an ASP.NET Mvc App

Bootswatch is nice. Free themes for Bootstrap. Integrating into an MVC app turned out to be a little more involved than I thought it would be.

Here’s what you have to do:

Sample Code:

1. Install Web Essentials – compiles LESS into CSS

2. Install Bootstrap NuGet Package:

PM> Install-Package Twitter.Bootstrap 

3. Install Bootstrap for MVC NuGet Package:

PM> Install-Package Twitter.Bootstrap.Mvc

4. Add the Bootstrap mixins.less to ~/Content/

5. Add the variables.less and bootswatch.less from your bootswatch theme to ~/Content/

6. Add the following imports to your mixins.less and bootswatch.less files


// Mixins
// -------------------------------------------------

@import "variables"; 
// Flatness by Jenil (
// Bootswatch 2.3.2
// -----------------------------------------------------

@import "mixins";
@import "variables"; 

7. Save those less files and Web Essentials will compile them to CSS

8. Add bootswatch.css to your bootstrap bundle in ~/App_Start/BootstrapBundleConfig.cs

BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap").Include("~/Content/bootstrap.css", "~/Content/bootstrap-responsive.css", "~/Content/bootswatch.css")); 

9. Add the bootstrap bundle to _Layout.cshtml


That’s it. Here’s what my test looks like: