Best IT Recipes

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

I am going 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.

+69
twitter-bootstrap asp.net-mvc asp.net-mvc-5 bootswatch
Feb 17 '14 at 21:11
source share
5 answers

The steps for applying the theme are pretty simple. To really understand how everything works together, you need to understand what the ASP.NET MVC 5 template provides out of the box and how you can customize it for your needs.

Note. If you have a general idea of ​​how the MVC 5 template works, scroll down to the topic section.



ASP.NET MVC 5 Template: How It Works

This transition describes how to create an MVC 5 project and what happens under the hood . See all the features of the MVC 5 template on this blog .

  • Create a new project. In the Templates section, select Web> ASP.NET Web Application. Enter a name for your project and click OK .

  • In the next wizard, select MVC and click OK . This will apply the MVC 5 pattern.

    Example of choosing MVC Template

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

    Example of installed css and js

  • Bootstrap comes with your web optimization feature in your application. Browse Views/Shared/_Layout.cshtml and find

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

    and

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

    These two paths relate to the sets set 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 allows you to run your application without pre-configuration. Try to start the project now.

    Default application running



Using Bootstrap Templates in ASP.NET MVC 5

This end-to-end application describes how to apply bootstrap themes in an MVC 5 project.

  • First download the css theme you want to apply. In this example, I will use Bootswatch Flatly . Include the downloaded flatly.bootstrap.css and flatly.bootstrap.min.css in the Content folder (be sure to include in the 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"));

    include new topic:

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

  • If you use the standard _Layout.cshtml included in the MVC 5 template, you can go to step 4. If not, at least include these two lines in the layout along with your Bootable HTML Template :

    In <head> :

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

    Last line before closing </body> :

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

  • Try to start the project. Now you should see your newly created application using your theme.

    Default template using flatly theme



Resources

Check out this awesome 30-day James Chambers viewing guide for more information, tutorials, tips and tricks on using Twitter uploads using ASP.NET MVC 5.

+171
Feb 18 '14 at 20:23
source share

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

There's a Nuget package for integrating AdminLTE - the popular Bootstrap template - in MVC5

Just run this command in the Visual Studio Package Manager console

 Install-Package AdminLteMvc

Note. This may take some time, because it downloads all the necessary files, and also creates sample full and partial views (.cshtml files) that can help you with the development. A sample layout file, _AdminLteLayout.cshtml .

You will find the files in the folder ~/Views/Shared/

+16
Dec 25 '15 at 20:51
source share

First, if you can find your

bootstrap.css file

and

bootstrap.min.js file

on your computer, what you just do is

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

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

Then, on your computer, find the existing files and replace them with the new downloaded files.

NOTE. make sure the downloaded files are renamed to the folder

i.e.

enter image description here

Then you are good to go.

sometimes the result may not be displayed immediately. you may need to run css in a browser as a way to update

+2
Mar 05 '16 at 17:50
source share

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

+1
Sep 23 '16 at 16:23
source share

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

Of course, you need to add the paths to your layout page after the entire jQuery path.

0
Mar 04 '16 at 4:36
source share


More articles:


All Articles