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.
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.
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.
This walk-through covers how to apply bootstrap themes in an MVC 5 project
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.
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.