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/ |
<!-- 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");
<!-- 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;
});
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();
}
}
})
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)
})
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)
})
<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>
<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;
});
<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;
});
<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;
});
Google fonts are used in the template. They are as follows: Google Fonts
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.