Flaira - 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

		
		
		
	
		
			<!-- Perfect SCROLLBAR JS -->
			<script src="../assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
			<script src="../assets/plugins/perfect-scrollbar/p-scroll-1.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) {
					$("#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
					}, 0);
					return false;
				});
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
				$(document).on("click", ".fullscreen-button", function toggleFullScreen() {
					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 {
						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/tooltip&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)
			})
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!