How can I implement a theme from bootswatch or wrapbootstrap in an MVC 5 project?

by

The steps to apply a theme are fairly simple. To really understand how everything works together, you’ll need to understand what the ASP.NET MVC 5 template is providing out of the box and how you can customize it for your needs.

Note: If you have a basic understanding of how the MVC 5 template works, scroll down to the theming section.

ASP.NET MVC 5 Template: How it works

This walk-through goes over how to create an MVC 5 project and what’s going on under the hood. See all the features of MVC 5 Template in this blog.

  1. Create a new project. Under Templates Choose Web > ASP.NET Web Application. Enter a name for your project and click OK.

  2. On the next wizard, choose MVC and click OK. This will apply the MVC 5 template.

    Example of choosing MVC Template

  3. The MVC 5 template creates an MVC application that uses Bootstrap to provide responsive design and theming features. Under the hood, the template includes a bootstrap 3.* nuget package that installs 4 files: bootstrap.css, bootstrap.min.css, bootstrap.js, and bootstrap.min.js.

    Example of installed css and js

  4. Bootstrap is bundled in your application by using the Web Optimization feature. Inspect Views/Shared/_Layout.cshtml and look for 

    @Styles.Render("~/Content/css")

    and

    @Scripts.Render("~/bundles/bootstrap")

    These two paths refer to bundles set up in App_Start/BundleConfig.cs:

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/bootstrap.js",
    "~/Scripts/respond.js"));

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

  5. This is what makes it possible to run your application without any configuring up front. Try running your project now.

    Default Application Running

Applying Bootstrap Themes in ASP.NET MVC 5

This walk-through covers how to apply bootstrap themes in an MVC 5 project

  1. First, download the css of the theme you’d like to apply. For this example, I’ll be using Bootswatch’s Flatly. Include the downloaded flatly.bootstrap.css and flatly.bootstrap.min.css in the Content folder (be sure to Include in Project as well).

  2. Open App_Start/BundleConfig.cs and change the following:

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

    to include your new theme:

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

  3. If you’re using the default _Layout.cshtml included in the MVC 5 template, you can skip to step 4. If not, as a bare minimum, include these two line in your layout along with your Bootstrap HTML template:

    In your <head>:

    @Styles.Render("~/Content/css")

    Last line before closing </body>:

    @Scripts.Render("~/bundles/bootstrap")

  4. Try running your project now. You should see your newly created application now using your theme.

    Default template using flatly theme

Resources

Check out this awesome 30 day walk-through guide by James Chambers for more information, tutorials, tips and tricks on how to use Twitter Bootstrap with ASP.NET MVC 5.

More Related Contents:

  1. Why map special routes first before common routes in asp.net mvc?
  2. MVC5 – How to set “selectedValue” in DropDownListFor Html helper
  3. How to extend available properties of User.Identity
  4. Updating user data – ASP.NET Identity
  5. How to change type of id in Microsoft.AspNet.Identity.EntityFramework.IdentityUser
  6. What is the advantage of using async with MVC5?
  7. Razor actionlink autogenerating ?length=7 in URL?
  8. Access email address in the OAuth ExternalLoginCallback from Facebook v2.4 API in ASP.NET MVC 5 [duplicate]
  9. Create and Run MVC 5 Project in VS 2012
  10. How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine?
  11. How to access Facebook private information by using ASP.NET Identity (OWIN)?
  12. MVC 5 Seed Users and Roles
  13. MVC5 Claims version of the Authorize attribute
  14. Bootstrap glyphicon not showing in Form
  15. OwinStartup not firing
  16. HTTP Error 500.19 and error code : 0x80070021
  17. ASP.NET MVC5/IIS Express unable to debug – Code Not Running
  18. Get ExtraData from MVC5 framework OAuth/OWin identity provider with external auth provider
  19. MVC 5 Owin Facebook Auth results in Null Reference Exception
  20. upgrading from MVC4 to MVC5
  21. VS2013 does not compile ASP.NET MVC5 views
  22. How to create custom scaffold templates in ASP.NET MVC5?
  23. Visual Studio 2013 – No Visual Basic/Visual C# Web Templates Installed
  24. Dots in URL causes 404 with ASP.NET mvc and IIS
  25. Could not load file or assembly ‘System.Web.Mvc’
  26. Logging raw HTTP request/response in ASP.NET MVC & IIS7
  27. Troubleshooting anti-forgery token problems
  28. MVC controller : get JSON object from HTTP body?
  29. MVC 5 Dynamic Rows with BeginCollectionItem
  30. Routing with and without controller name in ASP.NET MVC 4

Leave a Comment