Shifto - Bootstrap HTML Rent Template

How to add Sticky Header in Horizontal Menu

Just Add sticky.js in your Scripts Section

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

How to Add new pscroll

Add pscroll to div as shown below For Particular div

You can Declare Both id's and classes

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/pscrollbar/pscroll.js"></script>


/*---Scroling ---*/
//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

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

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

// ______________ Back to Top
$(window).on("scroll", function(e) {
	if ($(this).scrollTop() > 0) {
		$('#back-to-top').fadeIn('slow');
	} else {
		$('#back-to-top').fadeOut('slow');
	}
});
$("#back-to-top").on("click", function(e) {
	$("html, body").animate({
		scrollTop: 0
	}, 600);
	return false;
});

Add The HTML Properties data-toggle, data-placement, title and Property Values to Button as shown below For the Particular button

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

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

HTML
JS

Add The HTML Properties data-toggle, data-container, data-placement, title,data-content and Property Values to Button as shown below For the Particular button

<!-- Custom js-->
<script src="../assets/js/custom.js"></script>
// __________POPOVER
	var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
	var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
	return new bootstrap.Popover(popoverTriggerEl)
	})
	// By default, Bootstrap doesn't auto close popover after appearing in the page
	$(document).on('click', function (e) {
		$('[data-bs-toggle="popover"],[data-original-title]').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  // fix for BS 3.3.6
			}

		});
	});

Card

HTML

Remove Card

HTML
Js

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

// ______________Card Remove
	$(document).on('click', '[data-bs-toggle="card-remove"]', function(e) {
		let $card = $(this).closest(DIV_CARD);
		$card.remove();
		e.preventDefault();
		return false;
	});

Card Collapse

HTML
Js

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

// ______________Card Collapse
	$(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

HTML
Js

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

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

All Images are used: Pexels.com

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.