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

Question

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.

This might not be what you're looking for, but it's fairly simple. In your Content folder, include the `.css`theme and in your App_Start BundleConfig.cs, replace `~/Content/bootstrap.css` with `~/Content/yourtheme.bootstrap.css` — Carrie Kendall, Feb 17 '14 at 21:51
Thanks Carrie. That's an elegant answer. What do you do about the actual layout page? Just replace the body with html from the sample? I want to be sure there is no GitHub or other automated procedure for this. I will mark this as answered if no further comments are received in the next day. — Peter Loudon, Feb 18 '14 at 10:34
As for the layout page, I think it is the [default template](http://getbootstrap.com/getting-started/#template). It will work out of the box with other themes. Simply put, a theme is just differently colored/styled versions of bootstrap. So, the buttons might be different colors and some components might have different border-radius but the actual overall style will be more or less the same. You can apply [different layouts](http://getbootstrap.com/getting-started/#examples), just replace the includes with the bundles. — Carrie Kendall, Feb 18 '14 at 14:16
I will supply a well-written answer later with more details :] — Carrie Kendall, Feb 18 '14 at 14:16
Thanks @Carrie. Do you have experience of using the premium themes from [wrapbootstrap](https://wrapbootstrap.com) as well and is the principle the same? — Peter Loudon, Feb 18 '14 at 15:25
The principle is the same for applying a theme. You need the `.css` files. The source doesn't really matter. — Carrie Kendall, Feb 18 '14 at 20:33

Carrie Kendall · Answer 1 · 2015-12-07T18:19:35.387

188

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

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

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

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.

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.

edited Dec 07 '15 at 18:19

answered Feb 18 '14 at 20:23

Carrie Kendall

11,124
5
61
81

I wonder if it would it be possible to use the Bootswatch through its CDN as opposed to downloading it? – Robert Sep 01 '14 at 22:54
3

I wouldn't suggest using a CDN mainly because you lose a lot of optimization that is built into bundling (like [minification](http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification)). With that being said, you'd simply change the links in the view in step #4 to reflect that of the CDN ie `@Styles.Render("//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css")` – Carrie Kendall Sep 02 '14 at 14:14
What if the template has less files in them? Do you include those too and how? – Dale Marshall Sep 05 '14 at 04:37
@DaleMarshall look into [Web Essentials](http://vswebessentials.com/features/less). This is really a whole entire different question. If you need more help and can't find anything comparable, you should ask another question – Carrie Kendall Sep 05 '14 at 13:21
1

I did this (but with the cyborg theme) and now I get "An exception of type 'System.IndexOutOfRangeException' occurred in WebGrease.dll" when I try to run. The error occurs on Styles.Render("~/Content/css") – HitLikeAHammer Nov 05 '14 at 07:23
@CarrieKendall: That's not a good reason to not use a CDN. The referenced script is already minified, so all you lose is bundling, which means you've got an extra request, but it's an extra request that can load in parallel because it's on a different server, and a CDN at that (faster connection, faster transfers). – Chris Pratt Dec 18 '14 at 15:36
@ChrisPratt IMHO, it is a good reason that _relates to this post_. There are more reasons to not use a CDN but it really depends on your needs and use-case. Another good reason is that you have a dependency on a server that you no control over – Carrie Kendall Dec 18 '14 at 15:42
@CarrieKendall: The bundling framework supports fallbacks in the case that the CDN is unavailable, so you can effectively have the best of both worlds: a CDN 99.9% of the time, and in the rare instances that something might happen, a regular local script bundle. Still not seeing a strong argument against using a CDN. It's pretty much universally accepted that offloading as much as possible to a CDN is the way to go. All the big boys do it, Google and Yahoo both recommend it. Services like CloudFlare even use it as a selling point. – Chris Pratt Dec 18 '14 at 18:56
2

I will never use a public CDN for the single reason that I don't have control of [the box or the security practices in place](http://www.securityweek.com/jquery-confirms-website-hacked-again). In any case, this conversation isn't really on topic for this post, so if you'd like to carry on the conversation consider joining me in [chat](http://chat.stackoverflow.com/rooms/29074/html-css-webdesign) :) – Carrie Kendall Dec 18 '14 at 19:00
I notice the navbar has a different color than the one on bootswatch. Do you know the reason for this? – SixOThree Nov 09 '15 at 20:11
1

@SixOThree I wouldn't place much value in the screenshots, I pulled them from one of the linked articles just for a visual example. Hope the helps :) – Carrie Kendall Nov 09 '15 at 20:32
@CarrieKendall Thanks. And after some investigation it appears that's likely the inverse navbar color. – SixOThree Nov 10 '15 at 03:26
I just started learning ASP.NET MVC, and trying to apply a theme using these steps, but no matter what theme I use, the `navbar` always [looks messed up](https://s18.postimg.org/x80h7n4m1/Boot_Strap_Theme.png). Any idea why? I'm using the default `_Layout.cshtml` – 41686d6564 stands w. Palestine Jan 17 '18 at 23:39
1

I just found the solution: I was using bootstrap v4 themes while my bootstrap version was 3.x. Once I used a theme for the right version, everything worked without problems.@CarrieKendall, I think it might be very helpful for upcoming readers if you add this point to your answer. – 41686d6564 stands w. Palestine Jan 18 '18 at 03:16
How about RTL, how to handle it in adding admin theme?? – Mahdi Alkhatib Mar 11 '18 at 14:19

score 20 · Answer 2 · answered Dec 25 '15 at 20:51

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

This `AdminLteMvc Nuget is pretty neat! I checked out the preview just now at https://almsaeedstudio.com/preview It has like... everything one would need in an Admin Website template :) — Shiva, Jan 04 '16 at 02:19

score 3 · Answer 3 · answered Mar 05 '16 at 17:50

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

score 0 · Answer 4 · edited Jun 27 '17 at 17:38

0

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.

edited Jun 27 '17 at 17:38

Alex Moore

3,415
1
23
39

answered Mar 04 '16 at 04:36

shaddad

61
9

score 0 · Answer 5 · answered Sep 23 '16 at 16:23

0

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

answered Sep 23 '16 at 16:23

Hussain Patel

460
3
10
24

This article has been selected as "Article of the Day" in asp.net communities https://www.asp.net/community/articles on Oct 07 2016 – Hussain Patel Oct 24 '16 at 00:50

score 0 · Answer 6 · answered Mar 17 '20 at 13:29

0

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

answered Mar 17 '20 at 13:29

Ignacio

910
2
12
24

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

6 Answers6

ASP.NET MVC 5 Template: How it works

Applying Bootstrap Themes in ASP.NET MVC 5

Resources

Linked