Spruha - Bootstrap Premium HTML Dashboard Template

How to add Sticky Header

Add sticky class as shown below For Particular div

	
		

<div class="sticky">
	............
	............
</div>

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

	
	
How to Add Perfect pscroll

You can Declare Both id's and classes

	
		

<div class="xyz">
	............
	............
</div>

<div id="xyz1">
	............
	............
</div>


		
	
	

You can Declare Both id's and classes in place of xyz and xyz1

		

	.xyz{
		max-height:300px;   //// Add Particular max-height for this  class
		height:300px;       //// Add Particular height for this  class
	}
	#xyz1{
		max-height:300px;   //// Add Particular max-height for this  class
		height:300px;       //// Add Particular height for this  class
	}


		
		
    

<!-- Perfect-scrollbar js -->
<script src="../assets/plugins/perfect-scrollbar/perfect-scrollbar.js"></script>

	

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



/*---Scrolling ---*/
//P-scroll
new PerfectScrollbar('.xyz', {
	suppressScrollX: true
});

//P-scroll
new PerfectScrollbar('#xyz1', {
	suppressScrollX: true
});

		
	
Type URL
Plugin Link https://plugins.jquery.com/perfect-scrollbar/
How to Add Loader
	
		


			<!-- Loader -->
			<div id="global-loader">
				<img src="../assets/img/loader.svg" class="loader-img" alt="Loader">
			</div>
			<!-- End Loader -->

	
	
/*----- Global Loader -----*/
	/*-------- Loader -------*/
	#global-loader {
		position: fixed;
		z-index: 50000;
		background: #ffffff;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		height: 100%;
		width: 100%;
		margin: 0 auto;
		text-align: center;
		display: block;
	}

	.loader-img {
		position: absolute;
		right: 0;
		bottom: 0;
		top: 43%;
		left: 0;
		margin: 0 auto;
		text-align: center;
	}


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


	

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


window.addEventListener('load', () => {
	document.getElementById('global-loader').style.display = 'none';
})
// ______________ PAGE LOADING
$("#global-loader").fadeOut("slow");

	
	
How to Add Back To Top
	
		
			<!-- Back-to-top -->
			<a href="#top" id="back-to-top"><i class="fe fe-arrow-up"></i></a>
	
		
	
	
		

			#back-to-top {
				color: #ffffff;
				position: fixed;
				bottom: 20px;
				right: 30px;
				z-index: 99;
				display: none;
				text-align: center;
				z-index: 10000;
				height: 32px;
				width: 32px;
				line-height: 15px;
				background-repeat: no-repeat;
				border: 2px solid transparent;
				background-position: center;
				transition: background-color 0.1s linear;
				-moz-transition: background-color 0.1s linear;
				-webkit-transition: background-color 0.1s linear;
				-o-transition: background-color 0.1s linear;
				border-radius: 3px;
			}

			#back-to-top i {
				padding-top: 6px;
				font-size: 14px;
				line-height: 1.8rem;
			}
	
		
	
    <!-- 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

	
		
			<a class="nav-link icon full-screen-link">
				<i class="fe fe-maximize fullscreen-button fullscreen header-icons"></i>
				<i class="fe fe-minimize fullscreen-button exit-fullscreen header-icons"></i>
			</a>
    
<!-- 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');
	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');
		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

	
		
<button class="btn ripple btn-primary" data-bs-placement="bottom" data-bs-toggle="tooltip" title="Tooltip on bottom" type="button">Hover me</button>
    
<!-- Custom js-->
<script src="../assets/js/custom.js"></script>
<script src="../assets/js/tooltip.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

	
		
<button class="btn ripple btn-primary" data-bs-container="body" data-bs-content="Vivamus sagittis lacus vel." data-bs-placement="left" data-bs-popover-color="default" data-bs-toggle="popover" title="Popover left" type="button">Popover Left</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)
		})
Card
		
<div class="card custom-card ">
	<div class="card-header">
		<div><h3 class="card-title">Card title</h3></div>
	</div>
	<div class="card-body">
		.............
		.............
	</div>
	<div class="card-footer">
		.............
	</div>
</div>
Remove Card
	
		
<div class="card ">
	<div class="card-header">
		<h3 class="card-title">card-remove</h3>
		<div class="card-options">
			<a href="#" class="card-options-remove" data-bs-toggle="card-remove"><i class="fe fe-chevron-up"></i></a>
		</div>
	</div>
	<div class="card-body">
		...........
		...........
	</div>
</div>
    
<!-- 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
	
		
<div class="card ">
	<div class="card-header">
		<h3 class="card-title">Card-collapse</h3>
		<div class="card-options">
			<a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-x"></i></a>
		</div>
	</div>
	<div class="card-body">
		...........
		...........
	</div>
</div>
    <!-- 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
	
		
<div class="card ">
	<div class="card-header">
		<h3 class="card-title">Card-collapse</h3>
		<div class="card-options">
			<a href="#" class="card-options-fullscreen" data-bs-toggle="card-fullscreen"><i class="fe fe-maximize"></i></a>
		</div>
	</div>
	<div class="card-body">
		...........
		...........
	</div>
</div>
    
<!-- 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

Credits

Images credits by : vecteezy.com. All images are used from vecteezy website. Only we used for preview purpose if you want to use purchase vecteezy

Icons are used from iconscout website: iconscout.com.

THANK YOU !!!