Sidebar Examples
Component #1
-
Getting StartedRead more
What methods of payments are supported?
You can purchase the themes on Bootstrap Themes via any major credit/debit card (via Stripe) or with your Paypal account. We don't support cryptocurrencies or invoicing at this time.
-
Getting StartedRead more
How can I get a refund?
If you'd like a refund please reach out to us at themes@getbootstrap.com. If you need technical help with the theme before a refund please reach out to the seller first and they can get in touch with us if they're unable to resolve the issue.
-
Getting StartedRead more
Which license do I need?
There are three license types - Standard, Multisite, and Extended. We've provided the table below for a quick look at the difference between the them, as well as a few examples of ways each license could be used.
<!-- List -->
<div class="container content-space-1">
<div class="row">
<div id="stickyBlockStartPointEg1" class="col-md-4 mb-3 mb-md-0">
<!-- Navbar -->
<div class="navbar-expand-md">
<!-- Navbar Toggle -->
<div class="d-grid">
<button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenuEg1" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenuEg1">
<span class="d-flex justify-content-between align-items-center">
<span class="h6 mb-0">Nav menu</span>
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</span>
</button>
</div>
<!-- End Navbar Toggle -->
<!-- Navbar Collapse -->
<div id="navbarVerticalNavMenuEg1" class="collapse navbar-collapse">
<!-- Sticky Block -->
<div class="js-sticky-block"
data-hs-sticky-block-options='{
"parentSelector": "#stickyBlockStartPointEg1",
"targetSelector": "#header",
"breakpoint": "md",
"startPoint": "#stickyBlockStartPointEg1",
"endPoint": "#stickyBlockEndPointEg1",
"stickyOffsetTop": 20
}'>
<!-- List -->
<ul class="nav nav-link-gray nav-tabs nav-vertical">
<li class="nav-item">
<a class="nav-link" href="#">Top Solutions (5)</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Getting Started (7)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gulp (1)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Customization (1)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">License (4)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Payments (12)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Purchasing (35)</a>
</li>
</ul>
<!-- End List -->
</div>
<!-- End Sticky Block -->
</div>
<!-- End Navbar Collapse -->
</div>
<!-- End Navbar -->
</div>
<!-- End Col -->
<div class="col-md-8">
<!-- List -->
<ul class="list-unstyled list-py-2">
<li>
<!-- Media -->
<div class="d-sm-flex">
<div class="flex-shrink-0 mb-3 mb-sm-0">
<span class="svg-icon svg-icon-sm text-primary">
@@include("../assets/vendor/duotone-icons/cod/cod012.svg")
</span>
</div>
<div class="flex-grow-1 ms-sm-3">
<div class="mb-5">
<span class="text-cap">Getting Started</span>
<h5>What methods of payments are supported?</h5>
<p>You can purchase the themes on Bootstrap Themes via any major credit/debit card (via Stripe) or with your Paypal account. We don't support cryptocurrencies or invoicing at this time.</p>
</div>
<a class="link" href="../page-help-center-article.html">Read more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Media -->
</li>
<li class="border-top my-5"></li>
<li>
<!-- Media -->
<div class="d-sm-flex">
<div class="flex-shrink-0 mb-3 mb-sm-0">
<span class="svg-icon svg-icon-sm text-primary">
@@include("../assets/vendor/duotone-icons/cod/cod012.svg")
</span>
</div>
<div class="flex-grow-1 ms-sm-3">
<div class="mb-5">
<span class="text-cap">Getting Started</span>
<h5>How can I get a refund?</h5>
<p>If you'd like a refund please reach out to us at themes@getbootstrap.com. If you need technical help with the theme before a refund please reach out to the seller first and they can get in touch with us if they're unable to resolve the issue.</p>
</div>
<a class="link" href="../page-help-center-article.html">Read more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Media -->
</li>
<li class="border-top my-5"></li>
<li>
<!-- Media -->
<div class="d-sm-flex">
<div class="flex-shrink-0 mb-3 mb-sm-0">
<span class="svg-icon svg-icon-sm text-primary">
@@include("../assets/vendor/duotone-icons/cod/cod012.svg")
</span>
</div>
<div class="flex-grow-1 ms-sm-3">
<div class="mb-5">
<span class="text-cap">Getting Started</span>
<h5>Which license do I need?</h5>
<p>There are three license types - Standard, Multisite, and Extended. We've provided the table below for a quick look at the difference between the them, as well as a few examples of ways each license could be used.</p>
</div>
<a class="link" href="../page-help-center-article.html">Read more <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
<!-- End Media -->
</li>
<li class="border-top my-5"></li>
</ul>
<!-- End List -->
<!-- End Sticky End Point -->
<div id="stickyBlockEndPointEg1"></div>
<!-- Pagination -->
<nav class="d-sm-flex justify-content-sm-between align-items-sm-center text-center" aria-label="Page navigation example">
<ul class="pagination justify-content-center justify-content-sm-end mb-sm-0">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
<small class="text-muted">Showing 3 of 3</small>
</nav>
<!-- End Pagination -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End List -->
<!-- JS Implementing Plugins -->
<!-- bundlejs:vendor [..] -->
<script src="../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF STICKY BLOCKS
// =======================================================
Promise.all(Array.from(document.images)
.filter(img => !img.complete)
.map(img => new Promise(resolve => {
img.onload = img.onerror = resolve
})))
.then(() => {
new HSStickyBlock('.js-sticky-block', {
targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
})
})
})()
</script>
Component #2
Thanks for using our products and services ("Services"). The Services are provided by Pixeel Ltd. ("Space"), located at 153 Williamson Plaza, Maggieberg, MT 09514, England, United Kingdom.
By using our Services, you are agreeing to these terms. Please read them carefully.
Our Services are very diverse, so sometimes additional terms or product requirements (including age requirements) may apply. Additional terms will be available with the relevant Services, and those additional terms become part of your agreement with us if you use those Services.
1. Accounts
When you create an account with us, you must provide us information that is accurate, complete, and current at all times. Failure to do so constitutes a breach of the Terms, which may result in immediate termination of your account on our Service.
You are responsible for safeguarding the password that you use to access the Service and for any activities or actions under your password, whether your password is with our Service or a third-party service.
You agree not to disclose your password to any third party. You must notify us immediately upon becoming aware of any breach of security or unauthorized use of your account.
2. Links to other websites
Our Service may contain links to third-party web sites or services that are not owned or controlled by Space.
Space has no control over, and assumes no responsibility for, the content, privacy policies, or practices of any third party web sites or services. You further acknowledge and agree that Space shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such web sites or services.
We strongly advise you to read the terms and conditions and privacy policies of any third-party web sites or services that you visit.
3. Termination
We may terminate or suspend access to our Service immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms.
All provisions of the Terms which by their nature should survive termination shall survive termination, including, without limitation, ownership provisions, warranty disclaimers, indemnity and limitations of liability.
We may terminate or suspend your account immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms.
Upon termination, your right to use the Service will immediately cease. If you wish to terminate your account, you may simply discontinue using the Service.
All provisions of the Terms which by their nature should survive termination shall survive termination, including, without limitation, ownership provisions, warranty disclaimers, indemnity and limitations of liability.
4. Governing law
These Terms shall be governed and construed in accordance with the laws of Jersey, without regard to its conflict of law provisions.
Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect. These Terms constitute the entire agreement between us regarding our Service, and supersede and replace any prior agreements we might have between us regarding the Service.
5. Changes
We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is material we will try to provide at least 30 days notice prior to any new terms taking effect. What constitutes a material change will be determined at our sole discretion.
By continuing to access or use our Service after those revisions become effective, you agree to be bound by the revised terms. If you do not agree to the new terms, please stop using the Service.
<!-- Description -->
<div class="container content-space-1">
<div class="row">
<div class="col-md-4 col-lg-3 mb-3 mb-md-0">
<!-- Navbar -->
<div class="navbar-expand-md">
<!-- Navbar Toggle -->
<div class="d-grid">
<button type="button" class="navbar-toggler btn btn-white mb-3" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenuEg2" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarVerticalNavMenuEg2">
<span class="d-flex justify-content-between align-items-center">
<span class="text-dark mb-0">Menu</span>
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</span>
</button>
</div>
<!-- End Navbar Toggle -->
<!-- Navbar Collapse -->
<div id="navbarVerticalNavMenuEg2" class="collapse navbar-collapse">
<ul id="navbarSettingsEg2" class="js-sticky-block js-scrollspy nav nav-tabs nav-link-gray nav-vertical"
data-hs-sticky-block-options='{
"parentSelector": "#navbarVerticalNavMenuEg2",
"targetSelector": "#header",
"breakpoint": "md",
"startPoint": "#navbarVerticalNavMenuEg2",
"endPoint": "#stickyBlockEndPointEg2",
"stickyOffsetTop": 20
}'>
<li class="nav-item">
<a class="nav-link active" href="#content">1. Accounts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#linksToOtherWebsInfo">2. Links to other websites</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#terminationInfo">3. Termination</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#goveringLawInfo">4. Governing law</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#changesInfo">5. Changes</a>
</li>
</ul>
</div>
<!-- End Navbar Collapse -->
</div>
<!-- End Navbar -->
</div>
<!-- End Col -->
<div class="col-md-8 col-lg-9">
<div class="mb-7">
<p>Thanks for using our products and services ("Services"). The Services are provided by Pixeel Ltd. ("Space"), located at 153 Williamson Plaza, Maggieberg, MT 09514, England, United Kingdom.</p>
<p>By using our Services, you are agreeing to these terms. Please read them carefully.</p>
<p>Our Services are very diverse, so sometimes additional terms or product requirements (including age requirements) may apply. Additional terms will be available with the relevant Services, and those additional terms become part of your agreement with us if you use those Services.</p>
</div>
<div id="accountInfo" class="mb-7">
<h4>1. Accounts</h4>
<p>When you create an account with us, you must provide us information that is accurate, complete, and current at all times. Failure to do so constitutes a breach of the Terms, which may result in immediate termination of your account on our Service.</p>
<p>You are responsible for safeguarding the password that you use to access the Service and for any activities or actions under your password, whether your password is with our Service or a third-party service.</p>
<p>You agree not to disclose your password to any third party. You must notify us immediately upon becoming aware of any breach of security or unauthorized use of your account.</p>
</div>
<div id="linksToOtherWebsInfo" class="mb-7">
<h4>2. Links to other websites</h4>
<p>Our Service may contain links to third-party web sites or services that are not owned or controlled by Space.</p>
<p>Space has no control over, and assumes no responsibility for, the content, privacy policies, or practices of any third party web sites or services. You further acknowledge and agree that Space shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods or services available on or through any such web sites or services.</p>
<p>We strongly advise you to read the terms and conditions and privacy policies of any third-party web sites or services that you visit.</p>
</div>
<div id="terminationInfo" class="mb-7">
<h4>3. Termination</h4>
<p>We may terminate or suspend access to our Service immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms.</p>
<p>All provisions of the Terms which by their nature should survive termination shall survive termination, including, without limitation, ownership provisions, warranty disclaimers, indemnity and limitations of liability.</p>
<p>We may terminate or suspend your account immediately, without prior notice or liability, for any reason whatsoever, including without limitation if you breach the Terms.</p>
<p>Upon termination, your right to use the Service will immediately cease. If you wish to terminate your account, you may simply discontinue using the Service.</p>
<p>All provisions of the Terms which by their nature should survive termination shall survive termination, including, without limitation, ownership provisions, warranty disclaimers, indemnity and limitations of liability.</p>
</div>
<div id="goveringLawInfo" class="mb-7">
<h4>4. Governing law</h4>
<p>These Terms shall be governed and construed in accordance with the laws of Jersey, without regard to its conflict of law provisions.</p>
<p>Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of these Terms will remain in effect. These Terms constitute the entire agreement between us regarding our Service, and supersede and replace any prior agreements we might have between us regarding the Service.</p>
</div>
<div id="changesInfo" class="mb-7">
<h4>5. Changes</h4>
<p>We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is material we will try to provide at least 30 days notice prior to any new terms taking effect. What constitutes a material change will be determined at our sole discretion.</p>
<p>By continuing to access or use our Service after those revisions become effective, you agree to be bound by the revised terms. If you do not agree to the new terms, please stop using the Service.</p>
</div>
<!-- End Sticky End Point -->
<div id="stickyBlockEndPointEg2"></div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Description -->
<!-- JS Implementing Plugins -->
<!-- bundlejs:vendor [..] -->
<script src="../assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>
<script src="../assets/vendor/hs-scrollspy/dist/hs-scrollspy.min.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF STICKY BLOCKS
// =======================================================
Promise.all(Array.from(document.images)
.filter(img => !img.complete)
.map(img => new Promise(resolve => {
img.onload = img.onerror = resolve
})))
.then(() => {
new HSStickyBlock('.js-sticky-block', {
targetSelector: document.getElementById('header').classList.contains('navbar-fixed') ? '#header' : null
})
})
// INITIALIZATION OF SCROLLSPY
// =======================================================
new bootstrap.ScrollSpy(document.body, {
target: '#navbarSettingsEg2',
offset: 10
})
new HSScrollspy('#navbarVerticalNavMenuEg2', {
breakpoint: 'lg'
})
})()
</script>