Splite - Bootstrap Responsive Dashboard Simple Admin HTML5 Template

How to add Sticky Header

Add sticky class as shown below For Particular div 

		
		
		
		
		<!-- STICKY JS -->
		<script src="../assets/js/sticky.js"></script>
How to Add Perfect pscroll

You can Declare Both id's and classes

You can Declare classes in place of pscroll

		
		
		
	
		
			<!--P-scrollbar js-->
			<script src="../assets/plugins/p-scroll/perfect-scrollbar.js"></script>
			<script src="../assets/plugins/p-scroll/p-scroll.js"></script>
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) {
						$("#spinner").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-top-button
				$(window).on("scroll", function(e) {
					if ($(this).scrollTop() > 130) {
						$('#back-to-top').fadeIn('slow');
					} else {
						$('#back-to-top').fadeOut('slow');
					}
				});
How to Add FullScreen in Header

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
				$("#fullscreen-button").on("click", function toggleFullScreen() {

					$('html').addClass('window-fullscreen');
					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('window-fullscreen');
						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

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

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

		
			
		
	
		<!--popover js-->
		<script src="../assets/js/popover.js"></script>
		<!-- 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)
	})

	$(function(e) {
		'use strict';
		$(document).on('click', function(e) {
			$('[data-bs-toggle="popover"]').each(function() {
				if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
					(($(this).popover('hide').data('bs.popover') || {}).inState || {}).click = false 
				}
			});
		});
	});
Remove Card
		
			
		
	
		
	<!-- Custom js-->
	<script src="../assets/js/custom.js"></script>

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

		
			// ______________ 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
		
			
		
	
		
			<!-- Custom js-->
			<script src="../assets/js/custom.js"></script>

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

		
			// ______________ 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
		
			
		
	
		
	<!-- Custom js-->
	<script src="../assets/js/custom.js"></script>

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

		
			// ______________ 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

THANK YOU!