Spaner - Simple light Bootstrap Nice Admin Panel Dashboard Design Responsive HTML5 Template

Note:-

Please refer Faq's page in documentation itself for queries and customization like Colors, RTL, Dark style..etc.

How to add Sticky Header

HTML
JS

Add sticky class as shown below For Particular div

    
<!-- STICKY JS -->
<script src="../assets/js/stiky.js"></script>

How to Add Perfect pscroll

You can Declare Both id's and classes

You can Declare classes in place of pscroll

    

<!-- Perfect SCROLLBAR JS -->
<script src="../assets/plugins/p-scroll/perfect-scrollbar.js"></script>
<script src="../assets/plugins/p-scroll/pscroll.js"></script>

Below js is in p-scroll-1.js(assets/js/p-scroll-1.js)



//P-scrolling
const ps = new PerfectScrollbar('.app-sidebar', {
	useBothWheelAxes:true,
	suppressScrollX:true,
});

Type	URL
Plugin Link	https://plugins.jquery.com/perfect-scrollbar/

How to Add Loader

    
<!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)


// ______________ PAGE LOADING
$(window).on("load", function(e) {
	$("#global-loader").fadeOut("slow");
})

How to Add Back To Top

    <!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)


// ______________ BACK TO TOP BUTTON
$(window).on("scroll", function(e) {
	if ($(this).scrollTop() > 0) {
		$('#back-to-top').fadeIn('slow');
	} else {
		$('#back-to-top').fadeOut('slow');
	}
});
$(document).on("click", "#back-to-top", function(e) {
	$("html, body").animate({
		scrollTop: 0
	}, 600);
	return false;
});

Add class fullscreen-button to icon as shown below For Particular Icon

    
<!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)


// ______________Full screen
$(document).on("click", ".fullscreen-button", function toggleFullScreen() {
	$('html').addClass('fullscreen-button');
	if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
		if (document.documentElement.requestFullScreen) {
			document.documentElement.requestFullScreen();
		} else if (document.documentElement.mozRequestFullScreen) {
			document.documentElement.mozRequestFullScreen();
		} else if (document.documentElement.webkitRequestFullScreen) {
			document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
		} else if (document.documentElement.msRequestFullscreen) {
			document.documentElement.msRequestFullscreen();
		}
	} else {
		$('html').removeClass('fullscreen-button');
		if (document.cancelFullScreen) {
			document.cancelFullScreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen();
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen();
		}
	}
})

How to Add Tooltip

HTML
JS

Add The HTML Properties data-bs-toggle, data-bs-placement, title and Property Values to Button as shown below For the Particular button

    
<!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    
// ___________TOOLTIP
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
	return new bootstrap.Tooltip(tooltipTriggerEl)
})

How to Add Popover

HTML
JS

Add The HTML Properties data-bs-toggle, data-bs-container, data-bs-placement, title,data-bs-content and Property Values to Button as shown below For the Particular button

    
<!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    
// __________POPOVER
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})

Card

HTML

Remove Card

HTML
Js

    
<!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    
// ______________ CARD
const DIV_CARD = 'div.card';
// ______________ FUNCTION FOR REMOVE CARD
$(document).on('click', '[data-bs-toggle="card-remove"]', function(e) {
	let $card = $(this).closest(DIV_CARD);
	$card.remove();
	e.preventDefault();
	return false;
});

Card Collapse

HTML
Js

    <!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    
// ______________ CARD
const DIV_CARD = 'div.card';
// ______________ FUNCTIONS FOR COLLAPSED CARD
$(document).on('click', '[data-bs-toggle="card-collapse"]', function(e) {
	let $card = $(this).closest(DIV_CARD);
	$card.toggleClass('card-collapsed');
	e.preventDefault();
	return false;
});

Card FullScreen

HTML
Js

    
<!-- Custom js-->
<script src="../assets/js/custom.js"></script>

Below js is in custom.js(assets/js/custom.js)

    
// ______________ CARD
const DIV_CARD = 'div.card';
// ______________Card Full Screen
$(document).on('click', '[data-bs-toggle="card-fullscreen"]', function(e) {
	let $card = $(this).closest(DIV_CARD);
	$card.toggleClass('card-fullscreen').removeClass('card-collapsed');
	e.preventDefault();
	return false;
});

Font Used

Google fonts are used in the template. They are as follows: Google Fonts