Bootstrap 5 responsive admin template

documented by Sean Ngu

Created: 09/May/2020
By: Sean Ngu
Email: [email protected]

If you have any questions that are beyond the scope of this help file, please feel free to inbox me your question or send me an email via support email. Thanks so much!

* Support email can be found via downloaded version of Asp Studio

Download the .NET Core SDK from official website and install on your machine.

If you are using dotnet cli, run the following command:

cd /your-path-url/asp_studio_v2.0/template_asp/AspStudio/
donet run

If you are using visual studio, just double click the AspStudio.sln inside the template folder. You may download the latest version of Visual studio from here.

File structure overview for AspStudio - .NET Core 3.1 MVC

├── AspStudio.sln        
└── AspStudio/
    ├── Areas/                        // asp identity
    ├── bin/
    ├── Controllers/
    ├── Data/
    ├── Models/
    ├── obj/
    ├── Properties/
    ├── src/       
    ├── Views/                        // scss / img / js source file
    ├── wwwroot/                      // generated css / js / img file
    ├── app.db
    ├── gulpfile.js                   // gulp setting files
    ├── appsettings.development.json
    ├── appsettings.json
    ├── package.json
    ├── sidebar.json                  // sidebar menu structure
    ├── Program.cs
    ├── Startup.cs
    └── AspStudio.csproj

Below is the general page structure for /Views/Shared/Layout.cshtml.

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8" />
  <title>AspStudio | @ViewData["Title"]</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
  <meta content="" name="description" />
  <meta content="" name="author" />

  <!-- ================== BEGIN core-css ================== -->
  <link href="~/css/app.min.css" rel="stylesheet" />
  <!-- ================== END core-css ================== -->

  @RenderSection("Styles", required: false)
<body class="@ViewData["BodyClass"]">
  <!-- BEGIN #app -->
  <div id="app" class="app @ViewData["AppClass"]">
    @if (ViewData["AppWithoutHeader"] == null)
      <partial name="_Header" />

    @if (ViewData["AppWithoutSidebar"] == null)
      <partial name="_Sidebar" />

    @if (ViewData["AppWithoutContainer"] == null)
      <div id="content" class="app-content @ViewData["AppContentClass"]">

        <!-- BEGIN btn-scroll-top -->
        <a href="#" data-click="scroll-top" class="btn-scroll-top fade">
          <i class="fa fa-arrow-up"></i>
        <!-- END btn-scroll-top -->

      <!-- BEGIN btn-scroll-top -->
      <a href="#" data-click="scroll-top" class="btn-scroll-top fade">
        <i class="fa fa-arrow-up"></i>
      <!-- END btn-scroll-top -->

    @RenderSection("OutterAppContainerContent", required: false)

    @if (ViewData["AppWithFooter"] != null)
      <partial name="_Footer" />

  <!-- ================== BEGIN core-js ================== -->
  <script src="~/js/app.min.js"></script>
  <!-- ================== END core-js ================== -->
  @RenderSection("Scripts", required: false)

Below is the list of supported variable / setting in shared page.

Variable Usage
ViewData["HtmlAttribute"] Set the attribute for html tag
ViewData["MetaDescription"] Set the variable for meta description
ViewData["MetaAuthor"] Set the variable for meta author
ViewData["MetaKeywords"] Set the variable for meta keywords
ViewData["Title"] Set the page title for individual page
ViewData["BodyClass"] Add css class to the body tag
ViewData["AppClass"] Add css class to the .app container
ViewData["AppContentClass"] Add css class to the .app-content container
ViewData["AppWithoutHeader"] Set to false if you wish to remove header
ViewData["AppWithoutSidebar"] Set to false if you wish to remove sidebar
ViewData["AppWithoutContainer"] Set to false if you wish to render the page content without .app-content container
ViewData["AppWithFooter"] Set to true if you wish to add the footer to the page

Below is the list of supported section in shared page.

Section Usage
@section MetaTag {
-- tag html --
A way to add extra meta tag in individual page
@section Styles {
-- css files / url --
A way to add extra css files in individual page
@section Scripts {
-- js files / url --
A way to add extra js files in individual page
@section OutterAppContainerContent {
-- outter content here --
A way to put the content outside .app container

All the css files used in AspStudio has been compiled into one single files app.min.css by using gulp. Below is the list of library included in app.min.css. You may change the setting in gulpfile.js if you wish to add / remove library from app.min.css.

  1. FontAwesome
  2. jQuery UI
  3. Animate.css
  4. Pace Loader
  5. Bootstrap
  6. AspStudio Core CSS

This theme compiles 7 javascript library into one single file app.min.js by using gulp. Below is the list of library included in app.min.js. You may change the setting in gulpfile.js if you wish to add / remove library from app.min.js.

  1. Pace Loader
  2. jQuery
  3. jQuery UI
  4. Bootstrap
  5. Slimscroll
  6. JavaScript Cookie
  7. AspStudio Core Javascript

Sidebar minified:

  ViewData["AppClass"] = "app-sidebar-minified";

Full height:

  ViewData["AppClass"] = "app-content-full-height";

Full width:

  ViewData["AppClass"] = "app-content-full-width";
  ViewData["AppWithoutSidebar"] = true;

Fixed footer:

  ViewData["AppClass"] = "app-footer-fixed";
  ViewData["AppWithFooter"] = true;

Boxed Layout

  ViewData["BodyClass"] = "app-with-bg";
  ViewData["AppClass"] = "app-boxed-layout";

If you wish to enable the gulp compilation during debug / release process, kindly enable the following option in AspStudio.csproj.

Do not forget to run the npm install command by using command prompt / terminal to generate the node_module folder.
// remove the comment syntax

<Target Name="MyPreCompileTarget" BeforeTargets="Build">
  <Exec Command="gulp" />

You may run the following command to generate the plugins files in /lib folder

cd /your-path-url/asp_studio_v2.0/template_asp/AspStudio/
npm install
gulp plugins

I've used the following images, icons or other files as listed.


  1. .NET: https://dotnet.microsoft.com/

jQuery Plugins

  1. animate.css: https://daneden.github.io/animate.css/
  2. ApexCharts: https://apexcharts.com/
  3. jQuery File Upload: https://blueimp.github.io/jQuery-File-Upload/
  4. Bootstrap: http://getbootstrap.com/
  5. Bootstrap Datepicker: https://uxsolutions.github.io/bootstrap-datepicker/
  6. Bootstrap Daterangepicker: http://www.daterangepicker.com/
  7. Bootstrap Slider: https://www.eyecon.ro/bootstrap-slider/
  8. Bootstrap Timepicker: http://jdewit.github.io/bootstrap-timepicker/
  9. Bootstrap Table: https://bootstrap-table.com/
  10. Bootstrap 3 Typeahead: https://github.com/bassjobsen/Bootstrap-3-Typeahead/
  11. Chart.js: https://chartjs.org
  12. DataTables: https://datatables.net/
  13. FontAwesome: https://fontawesome.com/
  14. Fullcalendar: https://fullcalendar.io/
  15. jQuery: https://jquery.com/
  16. jQuery Slimscroll: http://rocha.la/jQuery-slimScroll
  17. jQuery UI: https://jqueryui.com/
  18. jquery.maskedinput: https://github.com/excellalabs/jquery.maskedinput
  19. Javascript Cookie: https://github.com/js-cookie/js-cookie
  20. jVectormap: http://jvectormap.com/
  21. Tag-It: http://aehlke.github.io/tag-it/
  22. Selectpicker: https://picker.uhlir.dev/
  23. Spectrum: https://seballot.github.io/spectrum/
  24. kbw-countdown: https://github.com/kbwood/countdown
  25. moment: http://momentjs.com/
  26. Pace: https://github.com/HubSpot/pace
  27. PhotoSwipe: https://photoswipe.com/
  28. Popper.js: https://popper.js.org/
  29. Summernote: https://github.com/summernote/summernote


  1. Unsplash: https://unsplash.com/
  2. Freepik: https://www.freepik.com/


  1. Flaticon: https://www.flaticon.com/