admin

Please wait...

search
close

Overview

Thank you for downloading Narzu Bootstrap 5 Hospital Admin Dashboard Template. If you have any queries which can not solve using this document, feel free to email me. I'll happy to help you.

  • Item Name : Narzu Bootstrap 5 Hospital Admin Dashboard Template
  • Item Version : V 1.0.0
  • created: 02/04/2025
  • latest update: 02/04/2025
  • by: redstartheme
  • email: redstartheme@gmail.com

Introductions

Narzu Admin is a fully responsive admin dashboard template based on bootstrap 5 version. It is fully responsive built using SASS preprocessor, HTML5, CSS3 and jQuery plugins. Narzu have lots of components, which you can use in your application. It works natively on mobile devices, making it an accessible way of managing your own website from wherever you are.

Narzu Admin comes with many example pages with many ready to use components and easy to customize. Narzu offers multiple theme options, you can chose as per your choice.

This documentation will guide you through installing the template and exploring the various components that are bundled with the template.

Dependencies

Installation

Installation Guide

After download package you can find pre build app folder in source/light, source/dark packages. Choose your desire template and you just need to copy and paste app folder in your desire location.

Note: we suggest you to add your code in custom.js & custom.css, so whenever the update of Narzu Admin comes it does not affect your code.

Prerequisite

  • Node.js and NPM : You can download Node.js from https://nodejs.org. NPM comes bundled with Node.js.
  • Install gulp locally : You can install gulp in local machine by executing from your terminal npm install gulp -g .
  • Install dependency : After installing Node, npm and gulp run npm install command from the root of your project directory into terminal. It will install all the necessary dependencies for the application using package.json file.
  • Build : Run gulp command from project directory to build the project. All require files are compile and place in /app directory.
  • Just copy and paste app folder in your location. That's it!!!

Folder Structure

                         	
+---light
  |   +---app
  |   	+---assets
  |   	  +---bundles
  |   	  +---css
  |   	  +---fonts
  |   	  +---img
  |   	  +---js
  |     +---.html files       
  |   +---scss    
  |   	+---.scss files      
  |   +---gulpfile.js
  |   +---package.json
  +---document
  |   +---assets
  |      +---css
  |   	 +---fonts
  |   	 +---img
  |   	 +---js
  |   +---index.html

Let's get to know the description of each folder.

Folder Name Description
app/ Is a root folder.
app/assets All distribution files are placed here, such as CSS, Images, third-party libraries, fonts and JavaScript.
app/assets/bundles All third-party libraries are placed here, Also, put the library that you want to add in this folder.
app/assets/css All CSS files are placed here, namely app.min.css, components.css, style.css and custom.css. if you want to change the existing CSS rules, please use the custom.css file.
app/assets/fonts All font files are here, the font used by this template.
app/assets/img You can find all the images used by this template in this folder.
app/assets/js All JS files are placed here, namely app.min.js, scripts.js, custom.js and page related js files. If you want to add your own javaScript code please use custom.js file.
app/.html All template HTMl files are placed here.
scss/ All SASS files are placed here.
gulpfile.js/ GULP task related code are written in this file.
package.json/ package.json provides a simple way for people to keep track of packages they use in your application.

Navbar

For navbar we use the following structure.

                         	
<nav class="navbar navbar-expand-lg main-navbar sticky">
    <div class="form-inline mr-auto">
        <ul class="navbar-nav mr-3">
        <li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg
                                collapse-btn"> <i data-feather="menu"></i></a></li>
        <li>
            <form class="form-inline mr-auto">
            <div class="search-element">
                <input class="form-control" type="search" placeholder="Search" aria-label="Search" data-width="200">
                <button class="btn" type="submit">
                <i class="fas fa-search"></i>
                </button>
            </div>
            </form>
        </li>
        </ul>
    </div>
    <ul class="navbar-nav navbar-right">
        <li><a href="#" class="nav-link nav-link-lg fullscreen-btn">
            <i data-feather="maximize"></i>
        </a></li>
        <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown"
            class="nav-link nav-link-lg message-toggle"><i data-feather="mail" class="mailAnim"></i>
            <span class="badge headerBadge1">
            </span> </a>
        <div class="dropdown-menu dropdown-list dropdown-menu-right pullDown">
            <div class="dropdown-header">
            Messages
            <div class="float-right">
                <a href="#">Mark All As Read</a>
            </div>
            </div>
            <div class="dropdown-list-content dropdown-list-message">
            <a href="#" class="dropdown-item"> <span class="dropdown-item-avatar
                                        text-white"> <img alt="image" src="assets/img/users/user-1.png" class="rounded-circle">
                </span> <span class="dropdown-item-desc"> <span class="message-user">John
                    Deo</span>
                <span class="time messege-text">Please check your mail !!</span>
                <span class="time">2 Min Ago</span>
                </span>
            </a> 
            ......
            </div>
            <div class="dropdown-footer text-center">
            <a href="#">View All <i class="fas fa-chevron-right"></i></a>
            </div>
        </div>
        </li>
        <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown"
            class="nav-link notification-toggle nav-link-lg"><i data-feather="bell"></i>
        </a>
        <div class="dropdown-menu dropdown-list dropdown-menu-right pullDown">
            <div class="dropdown-header">
            Notifications
            <div class="float-right">
                <a href="#">Mark All As Read</a>
            </div>
            </div>
            <div class="dropdown-list-content dropdown-list-icons">
            <a href="#" class="dropdown-item dropdown-item-unread"> <span
                class="dropdown-item-icon l-bg-orange text-white"> <i class="far fa-envelope"></i>
                </span> <span class="dropdown-item-desc"> You got new mail, please check. <span class="time">2 Min
                    Ago</span>
                </span>
            </a> 
            ......
            </div>
            <div class="dropdown-footer text-center">
            <a href="#">View All <i class="fas fa-chevron-right"></i></a>
            </div>
        </div>
        </li>
        <li class="dropdown"><a href="#" data-toggle="dropdown"
            class="nav-link dropdown-toggle nav-link-lg nav-link-user"> <img alt="image" src="assets/img/user.png"
            class="user-img-radious-style"> <span class="d-sm-none d-lg-inline-block"></span></a>
        <div class="dropdown-menu dropdown-menu-right pullDown">
            <div class="dropdown-title">Hello Sarah Smith</div>
            <a href="profile.html" class="dropdown-item has-icon"> <i class="far
                                    fa-user"></i> Profile
            </a> <a href="timeline.html" class="dropdown-item has-icon"> <i class="fas fa-bolt"></i>
            Activities
            </a> <a href="" class="dropdown-item has-icon"> <i class="fas fa-cog"></i>
            Settings
            </a>
            <div class="dropdown-divider"></div>
            <a href="auth-login.html" class="dropdown-item has-icon text-danger"> <i class="fas fa-sign-out-alt"></i>
            Logout
            </a>
        </div>
        </li>
    </ul>
</nav>

Left Sidebar

Below code is used for left sidebar menu. 

                         	
<div class="main-sidebar sidebar-style-2">
    <aside id="sidebar-wrapper">
        <div class="sidebar-brand">
        <a href="index.html"> <img alt="image" src="assets/img/logo.png" class="header-logo" /> <span
            class="logo-name">Narzu</span>
        </a>
        </div>
        <div class="sidebar-user">
        <div class="sidebar-user-picture">
            <img alt="image" src="assets/img/user.png">
        </div>
        <div class="sidebar-user-details">
            <div class="user-name">Olivia Thomas</div>
            <div class="user-role">Administrator</div>
            <div class="sidebar-userpic-btn">
            <a href="profile.html" data-toggle="tooltip" title="Profile">
                <i data-feather="user"></i>
            </a>
            <a href="email_inbox.html" data-toggle="tooltip" title="Mail">
                <i data-feather="mail"></i>
            </a>
            <a href="chat.html" data-toggle="tooltip" title="Chat">
                <i data-feather="message-square"></i>
            </a>
            <a href="login.html" data-toggle="tooltip" title="Log Out">
                <i data-feather="log-out"></i>
            </a>
            </div>
        </div>
        </div>
        <ul class="sidebar-menu">
        <li class="menu-header">Main</li>
        <li class="dropdown active">
            <a href="index.html" class="nav-link"><i data-feather="monitor"></i><span>Dashboard</span></a>
        </li>
        <li class="dropdown">
            <a href="#" class="menu-toggle nav-link has-dropdown"><i
                data-feather="briefcase"></i><span>Widgets</span></a>
            <ul class="dropdown-menu">
            <li><a class="nav-link" href="widget-chart.html">Chart Widgets</a></li>
            <li><a class="nav-link" href="widget-data.html">Data Widgets</a></li>
            </ul>
        </li>
        ........ 
        </ul>
    </aside>
</div>

Right Sidebar

Below code is used for develop right sidebar panel.

                         	
<div class="settingSidebar">
    <a href="javascript:void(0)" class="settingPanelToggle"> <i class="fa fa-spin fa-cog"></i>
    </a>
    <div class="settingSidebar-body ps-container ps-theme-default">
        <div class=" fade show active">
        <div class="setting-panel-header">Setting Panel
        </div>
        <div class="p-15 border-bottom">
            <h6 class="font-medium m-b-10">Select Layout</h6>
            <div class="selectgroup layout-color w-50">
            <label class="selectgroup-item">
                <input type="radio" name="value" value="1" class="selectgroup-input-radio select-layout" checked>
                <span class="selectgroup-button">Light</span>
            </label>
            <label class="selectgroup-item">
                <input type="radio" name="value" value="2" class="selectgroup-input-radio select-layout">
                <span class="selectgroup-button">Dark</span>
            </label>
            </div>
        </div>
        <div class="p-15 border-bottom">
            <h6 class="font-medium m-b-10">Sidebar Color</h6>
            <div class="selectgroup selectgroup-pills sidebar-color">
            <label class="selectgroup-item">
                <input type="radio" name="icon-input" value="1" class="selectgroup-input select-sidebar">
                <span class="selectgroup-button selectgroup-button-icon" data-toggle="tooltip"
                data-original-title="Light Sidebar"><i class="fas fa-sun"></i></span>
            </label>
            <label class="selectgroup-item">
                <input type="radio" name="icon-input" value="2" class="selectgroup-input select-sidebar" checked>
                <span class="selectgroup-button selectgroup-button-icon" data-toggle="tooltip"
                data-original-title="Dark Sidebar"><i class="fas fa-moon"></i></span>
            </label>
            </div>
        </div>
        <div class="p-15 border-bottom">
            <h6 class="font-medium m-b-10">Color Theme</h6>
            <div class="theme-setting-options">
            <ul class="choose-theme list-unstyled mb-0">
                <li title="white" class="active">
                <div class="white"></div>
                </li>
                <li title="cyan">
                <div class="cyan"></div>
                </li>
                <li title="black">
                <div class="black"></div>
                </li>
                <li title="purple">
                <div class="purple"></div>
                </li>
                <li title="orange">
                <div class="orange"></div>
                </li>
                <li title="green">
                <div class="green"></div>
                </li>
                <li title="red">
                <div class="red"></div>
                </li>
            </ul>
            </div>
        </div>
        <div class="p-15 border-bottom">
            <div class="theme-setting-options">
            <label class="m-b-0">
                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input"
                id="mini_sidebar_setting">
                <span class="custom-switch-indicator"></span>
                <span class="control-label p-l-10">Mini Sidebar</span>
            </label>
            </div>
        </div>
        <div class="p-15 border-bottom">
            <div class="theme-setting-options">
            <label class="m-b-0">
                <input type="checkbox" name="custom-switch-checkbox" class="custom-switch-input"
                id="sticky_header_setting">
                <span class="custom-switch-indicator"></span>
                <span class="control-label p-l-10">Sticky Header</span>
            </label>
            </div>
        </div>
        <div class="mt-4 mb-4 p-3 align-center rt-sidebar-last-ele">
            <a href="#" class="btn btn-icon icon-left btn-primary btn-restore-theme">
            <i class="fas fa-undo"></i> Restore Default
            </a>
        </div>
        </div>
    </div>
</div>

Content

Below code is used for add content.

                         	
 <section class="section">
    <div class="section-body">
      <!-- add content here -->
    </div>
  </section>

Card

Below code is used for basic card examples. You can check more examples on our card.html page.

                         	
<!-- card wrapper -->
  <div class="card">
    <!-- card header -->
    <div class="card-header">
      <!-- card title -->
      <h4>Card title</h4>
    </div>
    <!-- card body -->
    <div class="card-body">
      Card content
    </div>
    <!-- card footer -->
    <div class="card-footer">
      Card footer
    </div>
  </div>

Theme Setting

1. Light Or Dark Template


If you want to set light template you have to add light light-sidebar theme-white class on body tag using following js code in scripts.js file. You can directly add those class on html page body tag. 


//start up class add, add default class on body tag
jQuery("body").addClass("light"); // light or dark
jQuery("body").addClass("light-sidebar"); // light-sidebar or dark-sidebar
jQuery("body").addClass("theme-black"); // theme-white/theme-cyan/theme-black/theme-purple/theme-orange/theme-green/theme-red
// set theme default color
$(".choose-theme li").removeClass("active");
// set active theme white/cyan/black/purple/orange/green/red
$(".choose-theme li[title|='white']").addClass("active");
//set default dark or light layout(1=light, 2=dark)
$(".select-layout[value|='1']").prop("checked", true);
//set default dark or light sidebar(1=light, 2=dark)
$(".select-sidebar[value|='1']").prop("checked", true);
// sticky header default set to true
$("#sticky_header_setting").prop("checked", true);

If you want to set dark template you have to add dark dark-sidebar theme-black class on body tag using following js code in scripts.js file. You can directly add those class on html page body tag. 


//start up class add, add default class on body tag
jQuery("body").addClass("dark"); // light or dark
jQuery("body").addClass("dark-sidebar"); // light-sidebar or dark-sidebar
jQuery("body").addClass("theme-black"); // theme-white/theme-cyan/theme-black/theme-purple/theme-orange/theme-green/theme-red
// set theme default color
$(".choose-theme li").removeClass("active");
// set active theme white/cyan/black/purple/orange/green/red
$(".choose-theme li[title|='black']").addClass("active");
//set default dark or light layout(1=light, 2=dark)
$(".select-layout[value|='2']").prop("checked", true);
//set default dark or light sidebar(1=light, 2=dark)
$(".select-sidebar[value|='2']").prop("checked", true);
// sticky header default set to true
$("#sticky_header_setting").prop("checked", true);

2. Change Theme Color

For use white theme add .theme-white class in body tag.
For use cyan theme add .theme-cyan class in body tag.
For use black theme add .theme-black class in body tag.
For use purple theme add .theme-purple class in body tag.
For use orange theme add .theme-orange class in body tag.
For use green theme add .theme-green class in body tag.
For use red theme add .theme-red class in body tag.

3. Sidebar Color

For set light sidebar color you need to add class .light-sidebar, for set dark sidebar add .dark-sidebar class in body tag.

4. Collapsed Sidebar

For set sidebar in collapsed mode you need to add class .sidebar-mini in body tag.

Utilities

Utilities classes are very reusable classes with a single purpose to reduce the frequency of highly repetitive declarations.

Class Description Value
.m-l- Margin left 0|5|10|15|20|25
.m-r- Margin Right 0|5|10|15|20|25
.m-t- Margin Top 0|5|10|15|20|25
.m-b- Margin Bottom 0|5|10|15|20|25
.p-l- Padding Left 0|5|10|15|20|25
.p-r- Padding Right 0|5|10|15|20|25
.p-t- Padding Top 0|5|10|15|20|25
.p-b- Padding Bottom 0|5|10|15|20|25
.margin- Margin 0|5|10|15|20|25
.padding- Padding 0|5|10|15|20|25
.font- Font Size 5 To 49
.bg- Background Color red|pink|purple|deep-purple|indigo|blue|light-blue|cyan|teal|green|light-green|lime|yellow|amber|orange|deep-orange|brown|grey|blue-grey|black|white|dark-gray
.l-bg-- Linear Background Color green|orange|cyan|red|purple|purple-dark
.col- Set Font Color red|pink|purple|deep-purple|indigo|blue|light-blue|cyan|teal|green|light-green|lime|yellow|amber|orange|deep-orange|brown|grey|blue-grey|black|white|dark-gray

New Page

To create a new page, you can use blank.html page, which provides basic page layout which you can extend and modify further.

Credits

Below is the list of all plugins and external resources used to power this template.

Plugins Link
Bootstrap https://getbootstrap.com/
jQuery http://jquery.com/
Bootstrap Colorpicker https://github.com/farbelous/bootstrap-colorpicker
Amchart 4 https://www.amcharts.com/
Light Gallery http://sachinchoolur.github.io/lightGallery/
Apex chart https://apexcharts.com/
Bootstrap Social https://github.com/lipis/bootstrap-social/
Bootstrap Select https://silviomoreto.github.io/bootstrap-select//
Bootstrap Tagsinput https://github.com/bootstrap-tagsinput/bootstrap-tagsinput/
Bootstrap Date Range Picker http://www.daterangepicker.com//
Bootstrap Time Picker http://jdewit.github.io/bootstrap-timepicker/
ChartJs https://github.com/chartjs/Chart.js/
CKeditor https://ckeditor.com/
cleave.js https://github.com/nosir/cleave.js/
codemirror https://codemirror.net/
Datatables https://datatables.net/
dropzonejs https://www.dropzonejs.com/
echart https://ecomfe.github.io/echarts-examples/public/index.html
editable-table https://github.com/mindmup/editable-table
flag icon css https://github.com/lipis/flag-icon-css/
fontawesome icon https://fontawesome.com/
Full Calendar https://fullcalendar.io/
Ion Icons https://github.com/ionic-team/ionicons/
Izitoast http://izitoast.marcelodolza.com/
jQuery Pwstrength http://matoilic.github.io/jquery.pwstrength/
jQuery Steps https://github.com/rstaib/jquery-steps
jQuery UI http://jqueryui.com/
Vector Maps http://jvectormap.com/
Material Icons https://material.io/tools/icons/?style=baseline/
Morris Chart https://github.com/morrisjs/morris.js/
nicescroll https://nicescroll.areaaperta.com/
Owl Carousel https://owlcarousel2.github.io/OwlCarousel2/
pretty checkbox https://github.com/lokesh-coder/pretty-checkbox
select2 https://select2.org/
Sweet Alert https://github.com/t4t5/sweetalert/
Sparkline http://omnipotent.net/jquery.sparkline//
Google Maps https://hpneo.github.io/gmaps/

Changelog

Version 1.0.0 - 02 Apr 2025
  • Initial released

Support

Once again thank you for purchasing the theme. I am always available to help you.

If you have any type of query or support needed, feel free to contact us by mail or message to redstartheme@gmail.com