ASP.NET MVC - Installing AdminLTE dashboard to replace Bootstrap template

When creating a new ASP.NET MVC project in Visual Studio, the project will use a Bootstrap front-end framework by default. But there are more sophisticated templates with the extended functionality available. I wanted to use one of those instead of the one provided by Visual Studio. I discovered AdminLTE, a dashboard & control panel theme built on top of the Bootstrap 3.0. This article will show you how I replaced the default Bootstrap framework with the AdminLTE template in an ASP.NET MVC project.

This article is in process of being updated for the AdminLTE v3.0.5. Please check again in few days for the updated version.

Let’s first create an ASP.NET MVC Project using Visual Studio:

  • Go to File > New > Project
  • Under Visual C# Templates, select ASP.NET Web Application (.NET Framework)
  • Give it a name and click OK.
  • Next, we need to select which type of ASP.NET 4.5.2 Templates to use. Select MVC and Click OK.

The default ASP.NET MVC project looks like this:

Visual Studio Default MVC project website
Visual Studio Default MVC project website (Click image to enlarge)

Now that the project has been created, let’s add an AdminLTE template inside this project. The end result will look something like this:

Visual Studio MVC Project Website with AdminLTE template home page
Visual Studio MVC Project Website with AdminLTE template(Click image to enlarge)
Note: At the time of writing this article, the latest version is AdminLTE 2.4.0 available on GitHub.

1.) Install AdminLTE from NuGet

First, we will install AdminLTE template using NuGet packet manager.

The steps are as follows:

  • In "Solution Explorer", right-click on the project and select “Manage NuGet Packages”:

    Visual Studio MVC application - add NuGet package

    Click image to enlarge
  • A NuGet Packet Manager window will open. Select Browse on the top left corner and type adminlte in the search field:

    Visual Studio MVC application - NuGet installation of AdminLTE package
    NuGet installation of AdminLTE package (Click image to enlarge)
  • Select the AdminLTE by almsaeedstudio. It should be the first item in the list and click on Install button located on the right side.
  • The Preview window might appear showing you which packages will be installed and which updated. The AdminLTE package will replace the existing "bootstrap 3.0.0" and "jQuery 1.10.2" with the newer versions. Additionally, it will install font-awesome package. Click OK to continue.

After installation, the package will create admin-lte folder inside the project containing the AdminLTE CSS styles, different skins and JavaScript files, but nothing else. There won’t be any changes to the layout, also the plugins will be missing. So in the next step, we will download the AdminLTE template to get those missing parts.

2.) Download AdminLTE template

We will use the AdminLTE starter page to replace the content of the _Layout.cshtml file, which is used as a Layout for the project. This starter page is a good starting point from which we can add additional functionality as needed.

Go to to download the AdminLTE Control Panel Template. There will be a download button that will redirect you to the GitHub page. Find the latest version with green “Latest release” message in the sidebar and click on “Source Code (zip)” link to download the source files.

Extract the files somewhere in your computer. Find the starter page starter.html and open it in Visual Studio or your favorite text editor.

3.) Replace the content of _Layout.cshtml

The _Layout.cshtml file is a Layout View located at Views > Shared > _Layout.cshtml. It is similar to the ASP.NET master page. With the layout view, we make sure, that we will have a consistent look across our web site. Check this article, if you want to learn more about layout in ASP.NET MVC.

Remove everything from _Layout.cshtml and replace it with the content of Starter.html. But inside _Layout.cshtml, there were a few lines of Razor code we still need and few additional lines of code, we want to add in our new layout. Let's do that now.

In the <head> tag

  • Find:
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    Remove it and replace it with:


    The first line references the Bootstrap style. We will also make sure in step 4, that it references the AdminLTE styles and skins. We will examine how @Styles.Render and @Scripts.Render work a little bit later. For now, let's continue with replacing the necessary lines.

  • Find:
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">

    Also find:

    <link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">

    Since the AdminLTE styles will be referenced using @Styles.Render("~/Content/css"), we don't need the above two lines, so remove them.

Inside the <body> tag

  • We also need to add menu navigation links from the default ASP.NET MVC project. Find:
    <li class="active"><a href="#"><i class="fa fa-link"></i> <span>Link</span></a></li>

    And replace it with:

    <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    Note: In the above example, the Home link will always be the active link due to hard-coded <li class="active">. Check this StackOverflow page for various solutions to this problem.
  • Find:
    <section class="content">

    Inside this <section> tag, add this:


    The @RenderBody() renders the content of the page, that is not in the named section. Named sections are those parts of the page wrapped with @Section { ... }, so everything else not wrapped with the named section will be rendered by @RenderBody(). Check this MSDN page and in particular Figure 1 of the Razor Layout Pages Structure to get a better idea on how the layout is structured using Razor.

Before the ending </body> tag

  • Find:
    <!-- jQuery 2.2.3 -->
    <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="dist/js/app.min.js"></script>

    Replace those lines with:

    @RenderSection("scripts", required: false)

Lines 1,2 and 4 are from the default ASP.NET MVC template. Lines 1 and 2 reference the jQuery and Bootstrap JavaScript files inside the MVC project. Line 3 (highlighted) shows the line that has been additionally added to reference the admin-lte.js script and any other script files for plugins that the template will use. We will define path to those specific files in step 4.

In line 4, the @RenderSection renders the section of the page named scripts if it exists. This can become handy, if we have a plugin that is only used in specific page. For example, if we want to have a slider plugin on a home page, it is not very efficient to have slider script on every page. In this case, we would add a named section scripts in index.cshtmlpage that references this script:

@section scripts {
 <!-- We would add slider scripts here -->

About Styles.Render and Scripts.Render methods

Now a few words about @Styles.Render and @Scripts.Render. They are used to render bundles of scripts and styles defined in App_Start > BundleConfig.cs file. Bundling has been added in ASP.NET 4.5. With this feature, we can bundle multiple script / style files into a single file and also minify them. All this improves the load time of the website. To learn more, check this MSDN page.

Now, let's define which files to include in those bundles.

4.) Add AdminLTE scripts and styles to bundles

In Solution Explorer, go to App_Start > BundleConfig.cs. Inside it, we find bundles already added by Visual Studio for jQuery, Modernizer and Bootstrap.

First, let’s add a new bundle that will contain AdminLTE script and any other scripts needed for our template. Inside the RegisterBundles() method, add the following code:

bundles.Add(new ScriptBundle("~/admin-lte/js").Include(

For the AdminLTE styles, let's add them in an already existing bundle.

bundles.Add(new StyleBundle("~/Content/css").Include(

Inside that bundle, add the styles for AdminLTE.css and skin-blue.css, so that the end result is:

bundles.Add(new StyleBundle("~/Content/css").Include(

We didn’t reference the minimized versions of (app.min.js, AdminLTE.min.css, skin-blue.min.css) since the bundling will already create the optimization for us.

Note: There are other skins available besides the skin-blue.css. For full list, open Solution Explorer and expand the admin-lte/css/skins folder. When changing the skin, we also need to change the class name inside <body> tag.

Adding plugin's scripts and styles to bundles

Next, let’s also reference scripts and styles for the plugins. What files we include depends on the plugins we will be using. We discuss the plugins in more detail in the next step. For now, just add a single script for fastclick.js library. It is recommended by AdminLTE to enhance the user experience using mobile browsers.

bundles.Add(new ScriptBundle("~/admin-lte/js").Include(

We simply add the path to the fastclick.js file, like so:

bundles.Add(new ScriptBundle("~/admin-lte/js").Include(

The plugins folder has not been added yet, we will do that in the next section.

About site.css

Before we focus on the plugins, lets quickly focus on site.css. It is located at Content > site.css. It has CSS rules for the default ASP.NET MVC template that will not be used anymore or has rules that breaks the AdminLTE styling, so it's better to remove everything. We can use site.css to add our own custom styles.

The adminLTE control panel takes use of many plugins to extend its functionality, from charts, colorpicker, datepicker, datatables and so on. Let’s add the plugins next.

5.) Adding more functionality by using plugins in the AdminLTE template

Currently, when we install the AdminLTE NuGet package, the plugins are not added in the MVC project, so we need to add them in our ASP.NET MVC project manually.

In the Windows Explorer, open the folder where you extracted file. Next, drag-and-drop the plugins folder from Windows Explorer to the Visual Studio Solution Explorer project inside the admin-lte folder. The Visual Studio will copy them in the project:

Visual Studio MVC AdminLTE drag-and-drop plugins

All that is left is to add the plugin files in the bundles.Add().Include method, depending on the plugins you want to use. See the sidebar of the AdminLTE example page showing all the available plugins in action. Select the plugin you are interested in the sidebar, then, open the webpage source code and look for CSS and JavaScript files that the plugin is using. Looking into the web page source code is also a good way to learn, how to use the plugin.

Let’s go through a concrete example and add bootstrap3-wysihtml5 plugin in our project.

Adding bootstrap-wysihtml5 Plugin in the ASP.NET MVC Project

The bootstrap-wysihtml5 can be found in the Editors AdminLTE example page in the sidebar under the Forms section. In the browser, right-click anywhere on the page and choose "View Page Source".

The steps are:

  1. In the source code, locate the scripts and styles for the plugin. In our example, we would find them:
    • Inside the <head> tag:
      <!-- bootstrap wysihtml5 - text editor -->
      <link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    • Before the ending </body> tag:
      <!-- Bootstrap WYSIHTML5 -->
      <script src="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
  2. So, let’s add those two files in the bundles. inside App_Start folder > BundleConfig.cs, find the bundles.Add() line that adds the AdminLTE scripts. We add the path of the script for the WYSIHTML5 plugin (highlighted line below):
                bundles.Add(new ScriptBundle("~/admin-lte/js").Include(

    Next, inside the already existing bundle for the styles, we add the line for the path to the WYSIHTML5 plugin style (highlighted line below):

                bundles.Add(new StyleBundle("~/Content/css").Include(
  3. But we are not done yet. If you check at the bottom of the Editors AdminLTE example page source code, there is an additional JavaScript code for that plugin:
    //bootstrap WYSIHTML5 - text editor

    So we need to add it just before the ending </body> tag inside _Layout.cshtml:

         //bootstrap WYSIHTML5 - text editor

Now let’s create a basic form to see the plugin in action.

Creating a form that uses bootstrap WYSIHTML5 text editor plugin

In the Solution Explorer, open Views > Home > Contact.cshtml. Inside it, add the following code:

<div class="box box-primary">
     <div class="box-body">
     @using (Html.BeginForm())
         <div class="form-group">
             @Html.TextBox("CustomerName", null, new { @class = "form-control" })
         <div class="form-group">
             @Html.TextArea("CustomerComment", new { @class = "textarea", rows = "10", style = "width:50%;background-color:#f8f8f8" })
         <div class="box-footer">
             <button class="btn btn-primary" type="submit">Submit</button>

The highlighted lines show the Razor code for the form, while the other lines are Bootstrap related tags and styles using the General Form Elements AdminLTE example page as a guide.

The contact page should now look something like this:

Visual Studio MVC project website with AdminLTE template - contact-page

Click image to enlarge

We do the same for the any other plugin we want to add.

Visitor Braian Pavanelli asked about the fullcalendar plugin. Let's add also this plugin next.

Adding fullcalendar plugin to AdminLTE template

First step is to add the plugin's script files. We do that by going to Nuget package manager. We open it the same way when we opened it in step 1. Select Browse tab and search for fullcalendar and select the one from Adam Shaw. Click Install. After installation, we need to tell to our project where the scripts are located.

Modifying bundle to include fullcalendar files

Go to App_Start > BundleConfig.cs and add the following code into the RegisterBundles() method

            bundles.Add(new ScriptBundle("~/bundles/fullcalendar").Include(

For .css files, we just add them to already existing bundles.Add(new StyleBundle("~/Content/css") where the other .css files that are already declared:

            bundles.Add(new StyleBundle("~/Content/css").Include(

Modifying _Layout.cshtml

Here, we just need to add another @Scripts.Render() method to already existing ones located at the end of the _Layout.cshtml file:


Add the calendar into a page

All that is left is to add a </div> tag where the calendar plugin will be shown and a script that activates it.

Open the page where you want the calendar to be added and at the end of the file, add the following:

@section scripts {
    $(function () {

        // page is now ready, initialize the calendar...

            // put your options and callbacks here


The @section scripts makes sure, the code inside it is injected at the same place, where we have @RenderSection("scripts", required: false) inside the _Layout.cshtml file.

Add the following code where you want the calendar to appear.

<div id='calendar'></div>

And this is it. The calendar should now be visible on the page. Check the fullcalendar official page for more information on how to use this plugin in more detail.


By creating an ASP.NET MVC project in Visual Studio, we get Bootstrap 3 as a Front-End Framework, but to have more components available, we replaced the default framework with the AdminLTE control panel / dashboard template. It is built on top of Bootstrap3, containing many plugins that extend functionality. Finally, we created a simple form on the contact page that uses one of the plugins and we also added a calendar plugin.


Click HERE to add your Comment
  1. Joe
    August 29, 2017
    • admin
      August 29, 2017
    • Daniel
      September 14, 2017
      • @liseref
        February 11, 2018
        • Bart
          April 13, 2019
    • Ernesto Suscriptor
      May 22, 2018
  2. Ehsan
    January 17, 2018
    • admin
      January 17, 2018
      • lev ntr
        March 13, 2018
  3. Jerion
    January 22, 2018
    • jesus
      March 2, 2018
  4. Slawomir
    January 26, 2018
  5. putra
    February 7, 2018
    • admin
      February 7, 2018
  6. Mateen Ansari
    February 7, 2018
  7. Martin A.
    March 2, 2018
  8. Ghaby
    March 5, 2018
  9. kurnis
    April 11, 2018
    • kurnis
      April 27, 2018
      • admin
        April 29, 2018
  10. Benjamin
    June 7, 2018
  11. sdb
    October 9, 2018
  12. Misha Khan
    October 20, 2018
  13. Shanadas C
    February 11, 2019
  14. Braian Pavanelli
    February 25, 2019
    • admin
      February 25, 2019
  15. Gatien
    February 26, 2019
    • admin
      February 26, 2019
  16. Aslal Shaja
    March 22, 2019
    • admin
      March 25, 2019
      • Rickson
        April 17, 2019
  17. aspnetcoreuser1
    April 13, 2019
  18. consumeTech
    April 30, 2019
    • admin
      May 1, 2019
      • Octavio
        November 29, 2019
        • Buckethead
          December 5, 2019
  19. Thulani Moleme
    May 1, 2019
    • admin
      May 2, 2019
  20. Frank
    June 19, 2019
  21. Dil Lil
    September 10, 2019
  22. Rakesh
    November 28, 2019
    • admin
      November 28, 2019
  23. Buckethead
    December 4, 2019
    • admin
      December 5, 2019
      • Narwhal
        May 26, 2020
        • admin
          May 27, 2020

Write a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.