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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  lt head gt     Styles Render    Content css     Last line before closing  lt  body gt     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    Bootstrap Bootstrap in the Visual Studio 2013 web project templates Getting Started with ASP NET MVC 5 Bootstrap 3 with ASP NET MVC 5     Step by Step by Twinkle Bootswatch - free themes for Bootstrap

User · Answer

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

[asp.net-mvc] How can I implement a theme from bootswatch or wrapbootstrap in an MVC 5 project?

Examples related to asp.net-mvc

Examples related to twitter-bootstrap

Examples related to asp.net-mvc-5

Examples related to bootswatch