Viboon - 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
    				$("#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-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() {
						$('html').addClass('fullscreenie');
						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('fullscreenie');
							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)
			})
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!