Clont - Bootstrap Responsive Flat Admin Dashboard HTML5 Template

Note:-

Please refer Faq's page in documentation itself for queries of customization like colors,rtl ,dark,transparent styles,etc..

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/p-scroll/perfect-scrollbar.js"></script>
<script src="../assets/plugins/pscrollbar/pscroll-sidemenu.js"></script>

Below js is in p-scroll1.js(assets/js/p-scroll1.js)



//P-scrolling
const ps3 = new PerfectScrollbar('.sidebar-right', {
    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)


		// ______________Loader
$(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) {
		$('body').addClass('side-shadow');
		$('#back-to-top').fadeIn('slow');
	} else {
		$('body').removeClass('side-shadow');
		$('#back-to-top').fadeOut('slow');
	}
});
$("#back-to-top").on("click", function(e) {
	$("html, body").animate({
		scrollTop: 0
	}, 0);
	return false;
});
How to Add FullScreen in Header

Add id fullscreen-button as shown below. 

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

	
		
    
<!-- Custom js-->
<script src="../assets/js/custom.js"></script>
<script src="../assets/js/popover.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)
	html: true
})
Card
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
$('[data-bs-toggle="card-remove"]').on('click', 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
$('[data-bs-toggle="card-collapse"]').on('click', 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
$('[data-bs-toggle="card-fullscreen"]').on('click', 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!