Bootstrap 5 responsive admin template
documented by Sean Ngu
Updated on: 17/July/2024
By: Sean Ngu
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to send your question via ThemeForest. Thanks so much!
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/template_asp/HudAsp/ dotnet run // if you are using hot reload, use the following command dotnet watch
If you are using visual studio, just double click the HudAsp.sln
inside the template folder. You may download the latest version of Visual studio from here.
File structure overview for HudAsp - .NET Core 8.0 MVC
template_startup/ ├── HudAsp.sln └── HudAsp/ ├── 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 └── HudAsp.csproj
Below is the general page structure for /Views/Shared/Layout.cshtml
.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HudAsp | @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/vendor.min.css" rel="stylesheet" /> <link href="~/css/app.min.css" rel="stylesheet" /> <link href="~/css/site.css" rel="stylesheet" asp-append-version="true" /> <!-- ================== END core-css ================== --> @RenderSection("Styles", required: false) </head> <body class="@ViewData["BodyClass"]"> <!-- BEGIN #app --> <div id="app" class="app @ViewData["AppClass"]"> @if (ViewData["AppHeaderNone"] == null) { <partial name="_Header" /> } @if (ViewData["AppSidebarNone"] == null) { <partial name="_Sidebar" /> } @if (ViewData["AppTopNav"] != null) { <partial name="_TopNav" /> } @if (ViewData["AppContentNone"] == null) { <div id="content" class="app-content @ViewData["AppContentClass"]"> @RenderBody() <!-- BEGIN btn-scroll-top --> <a href="#" data-click="scroll-top" class="btn-scroll-top fade"> <i class="fa fa-arrow-up"></i> </a> <!-- END btn-scroll-top --> </div> } else @RenderBody() <!-- BEGIN btn-scroll-top --> <a href="#" data-click="scroll-top" class="btn-scroll-top fade"> <i class="fa fa-arrow-up"></i> </a> <!-- END btn-scroll-top --> } @RenderSection("OutterAppContainerContent", required: false) @if (ViewData["AppFooter"] != null) { <partial name="_Footer" /> } <partial name="_ThemePanel" /> </div> <!-- ================== BEGIN core-js ================== --> <script> window.paceOptions = { ajax: { ignoreURLs: ['mainHub', '__browserLink', 'browserLinkSignalR'], trackWebSockets: false } }; </script> <script src="~/js/vendor.min.js"></script> <script src="~/js/app.min.js"></script> <!-- ================== END core-js ================== --> @RenderSection("Scripts", required: false) </body> </html>
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["AppHeaderNone"] |
Set to true if you wish to remove header |
ViewData["AppSidebarNone"] |
Set to true if you wish to remove sidebar |
ViewData["AppWithoutContainer"] |
Set to true if you wish to render the page content without .app-content container |
ViewData["AppFooter"] |
Set to true if you wish to add the footer to the page |
ViewData["AppTopNav"] |
Set to true if you wish to add the top nav to the page |
Below is the list of supported section in shared page.
Section | Usage |
---|---|
@section MetaTag { |
A way to add extra meta tag in individual page |
@section Styles { |
A way to add extra css files in individual page |
@section Scripts { |
A way to add extra js files in individual page |
@section OutterAppContainerContent { |
A way to put the content outside .app container |
All the css files used in HudAsp has been compiled into one single files vendor.min.css
and HudAsp core css is compiled into 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.
<!-- core-css --> <link href="~/css/vendor.min.css" rel="stylesheet" /> <link href="~/css/app.min.css" rel="stylesheet" /> <!-- OR without vendor.min.css --> <link href="~/lib/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" /> <link href="~/lib/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" /> <link href="~/lib/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" /> <link href="assets/plugins/animate.css/animate.min.css" rel="stylesheet" /> <link href="assets/plugins/pace-js/themes/black/pace-theme-flash.css" rel="stylesheet" /> <link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" /> <link href="assets/css/app.min.css" rel="stylesheet" /> <!-- core-css required folder --> /wwwroot/css /wwwroot/webfonts
This theme compiles 6 javascript library into one single file app.min.js
and HudAsp core js is compiled into 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.
Sidebar collapsed:
@{ ViewData["AppClass"] = "app-sidebar-collapsed"; }
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"; }
Top Nav (without sidebar)
@{ ViewData["AppClass"] = "app-with-top-nav app-without-sidebar"; ViewData["AppTopNav"] = true; ViewData["AppSidebarNone"] = true; }
Top Nav (without header)
@{ ViewData["AppClass"] = "app-with-top-nav app-without-header"; ViewData["AppTopNav"] = true; ViewData["AppHeaderNone"] = true; }
Mixed Nav
@{ ViewData["AppClass"] = "app-with-top-nav"; ViewData["AppTopNav"] = true; }
Mixed Nav Boxed Layout
@{ ViewData["AppClass"] = "app-with-top-nav app-boxed-layout"; ViewData["AppTopNav"] = true; }
Add the theme to the <body>
tag in /Views/Shared/_Layout.cshtml
in order to change the theme color.
<body class="theme-red">...</body> <body class="theme-pink">...</body> <body class="theme-orange">...</body> <body class="theme-yellow">...</body> <body class="theme-lime">...</body> <body class="theme-green">...</body> <body class="theme-teal">...</body> <body class="theme-cyan">...</body> <body class="theme-blue">...</body> <body class="theme-purple">...</body> <body class="theme-indigo">...</body> <body class="theme-black">...</body> <body class="theme-gray-100">...</body> <body class="theme-gray-200">...</body> <body class="theme-gray-300">...</body> <body class="theme-gray-400">...</body> <body class="theme-gray-500">...</body> <body class="theme-gray-600">...</body> <body class="theme-gray-700">...</body> <body class="theme-gray-800">...</body> <body class="theme-gray-900">...</body>
OR set the primary theme color from scss /src/scss/_variables.scss
<!-- LINE 79--> $theme: $red !default; $theme: $pink !default; $theme: $orange !default; $theme: $yellow !default; $theme: $lime !default; $theme: $green !default; $theme: $teal !default; $theme: $cyan !default; $theme: $blue !default; $theme: $purple !default; $theme: $indigo !default; $theme: $gray-200 !default;
Add the cover class to the <html>
tag in /Views/Shared/_Layout.cshtml
in order to change the page cover.
<html class="bg-cover-2">...</html> <html class="bg-cover-3">...</html> <html class="bg-cover-4">...</html> <html class="bg-cover-5">...</html> <html class="bg-cover-6">...</html> <html class="bg-cover-7">...</html> <html class="bg-cover-8">...</html> <html class="bg-cover-9">...</html>
Starting from version 2.0, we have implemented a default dark mode theme that is applied to the HTML page.
This is achieved through the use of the data-bs-theme="dark"
attribute in the <html>
tag.
If you wish to enable the light mode instead, you can easily do so by removing the data-bs-theme="dark"
attribute from the HTML tag.
This will disable the default dark mode and enable the light mode theme.
Please note that once you remove the data-bs-theme="dark"
attribute,
the light mode theme will persist even if the user refreshes the page or navigates to a different page within the application.
<!DOCTYPE html> <html lang="en" data-bs-theme="dark"> </html>to
<!DOCTYPE html> <html lang="en"> </html>
With this example, the data-bs-theme="dark"
attribute has been removed from html tag. This will enable the light mode to the entire page.
OR
If you want to apply light / dark mode to a single component only, you can add the data-bs-theme="light|dark"
attribute to that component.
<div class="card" data-bs-theme="light"> <div class="card-body"> <!-- your component content here --> </div> </div>
To enable RTL mode, follow these steps:
/src/_variables.scss
file in your code editor.$enable-rtl
variable and change its value to true:
$enable-rtl: true;This will enable RTL mode for your application.
app.min.css
file:
gulp cssThis will regenerate the app.min.css file with the changes you made to the
$enable-rtl
variable.
Global Variables
The /src/_variables.scss
file contains the variables that control the styles of your application.
To edit these variables, navigate to the /src/_variables.scss
file in your code editor and modify the values of the variables to suit your needs.
<!-- global variable --> /src/_variables.scss
Dark Mode Variables
The /src/_variables-dark.scss
file contains the variables that control the styles for dark mode.
These variables are used in conjunction with the variables in the /src/_variables.scss
file to provide different values for light and dark modes.
<!-- dark mode variable --> /src/_variables-dark.scss
If you wish to enable the gulp compilation during debug / release process, kindly add the following code in HudAsp.csproj
.
node_module
folder.
// add the following code <Target Name="MyPreCompileTarget" BeforeTargets="Build"> <Exec Command="gulp" /> </Target>
You may run the following command to generate
the plugins files in /lib folder
cd /your-path-url/template_asp/HudAsp/ npm install gulp plugins
I've used the following images, icons or other files as listed.
Platform
jQuery Plugins
Photos
Icons