Full Screen Background
...
<div class="full-screen-bg dark" data-image="dist/img/boot.jpg">
<div class="title">Full Screen Dark Background Title</div>
</div>
...
<script>
$('.full-screen-bg').fullScreenBackground();
</script>
...Navbar Keep on Screen
...
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Title</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" target="_blank" href="#">Bootstrap</a></li>
</ul>
</div>
</nav>
...
<script>
$('.navbar').keepOnScreen();
</script>
...Align Blocks
...
<div class="uneven-list">
<div class="list-item" style="height: 327px;"></div>
<div class="list-item" style="height: 132px;"></div>
<div class="list-item" style="height: 284px;"></div>
<div class="list-item" style="height: 272px;"></div>
<div class="list-item" style="height: 93px;"></div>
<div class="list-item" style="height: 112px;"></div>
<div class="list-item" style="height: 241px;"></div>
<div class="list-item" style="height: 108px;"></div>
<div class="list-item" style="height: 243px;"></div>
<div class="list-item" style="height: 202px;"></div>
</div>
...
<script>
$('.uneven-list').alignBlocks({
countPerRow: 4,
block: '.list-item',
spaceBetween: 0
});
</script>
...Custom Switch
<div class="fs-switch">
<input type="checkbox" name="admin" value="user">
<label class="fs-switch-magic"><i class="fa fa-check"></i><i class="fa fa-times"></i><div class="switch-handle"></div></label>
</div>
<label class="fs-switch-label">Admin <i class="fa fa-question-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="Add Admin Role"></i></label>Offcanvas Menu
...
<div class="offcanvas-menu bg-secondary">
<div class="offcanvas-menu-header clearfix">
<button class="pull-right offcanvas-menu-toggle p-3 text-white"><i class="fa fa-times"></i></button>
</div>
<ul>
<li><a href="#"><i class="fa fa-home fa-fw mr-2"></i> Home</a></li>
<li class='submenu-toggle'>
<a href='#'><i class="fa fa-text fa-fw mr-2">WS</i> With Sub</a>
<ul class="submenu">
<li><a target="_blank" href="#"><i class="fa fa-text fa-fw mr-2">1</i> One</a></li>
<li><a target="_blank" href="#"><i class="fa fa-text fa-fw mr-2">2</i> Two</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-text fa-fw mr-2">A</i> About</a></li>
</ul>
</div>
<div class="offcanvas-main-content">
...
</div>
...Image Popout
...
<div class="card">
<img class="card-img-top" src="img/example.jpg" alt="Image">
<div class="card-body">
<p class="card-text">Sed viverra augue tellus nulla sollicitudin scelerisque, scelerisque rutrum mauris pharetra tempor donec arcu, ante nunc ipsum donec nec dis vitae, ipsum tempor.</p>
</div>
</div>
...
<script type="text/javascript">
$(document).ready(function() {
$('.card-img-top').imagePopOut();
});
</script>Zoom In
...
<div class="card">
<img class="card-img-top" src="img/example.jpg" data-magnification-times="3" data-magnification-direction="right" alt="Image">
<div class="card-body">
<p class="card-text">Sed viverra augue tellus nulla sollicitudin scelerisque, scelerisque rutrum mauris pharetra tempor donec arcu, ante nunc ipsum donec nec dis vitae, ipsum tempor.</p>
</div>
</div>
...
<script type="text/javascript">
$(document).ready(function() {
$('.card-img-top').zoomIn();
});
</script>Local Storage
* storage.get(id) - get data from storage with id.
* storage.save(id, data) - save data to storage with id and data to save.
* storage.delete(id) - delete data from storage with id.
* storage.exists(id) - check if data exist with given id.