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

asp.net Mvc Twitter Bootstrap asp.net Mvc-5 Bootswatch

asp.net Mvc Problem Overview

I am about to create a new ASP.Net MVC5 web application. I would like to use a theme from bootswatch or wrapbootstrap in the application, but cannot find a set of instructions on how to do this.

asp.net Mvc Solutions

Solution 1 - asp.net Mvc

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.

Create a new project. Under Templates Choose Web > ASP.NET Web Application. Enter a name for your project and click OK.
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

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

<!-- language: lang-c# -->

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

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

<!-- language: lang-c# -->

    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

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).

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"));

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")
```
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.

Solution 2 - asp.net Mvc

This may be a little late; but someone will find it useful.

There's a Nuget Package for integrating AdminLTE - a popular Bootstrap template - to MVC5

Simply run this command in your Visual Studio Package Manager console

Install-Package AdminLteMvc

NB: It may take a while to install because it downloads all necessary files as well as create sample full and partial views (.cshtml files) that can guide you as you develop. A sample layout file _AdminLteLayout.cshtml is also provided.

You'll find the files in ~/Views/Shared/ folder

Solution 3 - asp.net Mvc

First, if you are able to locate your

bootstrap.css file

and

bootstrap.min.js file

in your computer, then what you just do is

First download your favorite theme i.e. from http://bootswatch.com/

Copy the downloaded bootstrap.css and bootstrap.min.js files

Then in your computer locate the existing files and replace them with the new downloaded files.

NOTE: ensure your downloaded files are renamed to what is in your folder

i.e.

Then you are good to go.

sometimes result may not display immediately. your may need to run the css on your browser as a way of refreshing

Solution 4 - asp.net Mvc

All what you have to do is to select and download the bootstrap.css and bootstrap.js files from Bootswatch website, and then replace the original files with them.

Of course you have to add the paths to your layout page after the jQuery path that is all.

Solution 5 - asp.net Mvc

I do have an article on MSDN - Creating ASP.NET MVC with custom bootstrap theme / layout using VS 2012, VS 2013 and VS 2015, also have a demo code sample attached.. Please refer below link. https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106

Solution 6 - asp.net Mvc

Bootswatch is a good alternative, but you can also find multiple types of free templates made for ASP.NET MVC that use MDBootstrap (a front-end framework built on top of Bootstrap) here:

ASP.NET MVC MDB Templates

Content Type	Original Author	Original Content on Stackoverflow
Question	Peter Loudon	View Question on Stackoverflow
Solution 1 - asp.net Mvc	Carrie Kendall	View Answer on Stackoverflow
Solution 2 - asp.net Mvc	Soma Mbadiwe	View Answer on Stackoverflow
Solution 3 - asp.net Mvc	Omari Victor Omosa	View Answer on Stackoverflow
Solution 4 - asp.net Mvc	shaddad	View Answer on Stackoverflow
Solution 5 - asp.net Mvc	Hussain Patel	View Answer on Stackoverflow
Solution 6 - asp.net Mvc	Ignacio	View Answer on Stackoverflow