brandbrandv1.0
Utilities
Data Display
Data Entry
Feedback
Tables
Charts
Maps
Navigation
BEHAVIORAL
Layout
Explore Our Templates 🚀
New
Powerful Svelte-Bootstrap SaaS App Template
Powerful Svelte-Bootstrap SaaS App Template
Admin CRM Application Template
Admin CRM Application Template
Robust Next.js SaaS App Template
Robust Next.js SaaS App Template
Powerful React-Bootstrap SaaS App Template
Powerful React-Bootstrap SaaS App Template
Modern Remix SaaS App Template
Modern Remix SaaS App Template
VueJS-Bootstrap SaaS App Template
VueJS-Bootstrap SaaS App Template
Intuitive Nuxt-Bootstrap SaaS App Template
Intuitive Nuxt-Bootstrap SaaS App Template

Page Footer

Explore the type of footer in Jampack.

Footer simple

Add data-footer="simple" in wrapper class and paste below snippet in <!-- Page Footer --> section.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
<div class="hk-footer">
	<footer class="container-xxl footer py-0">
		<div class="row">
			<div class="col-xl-8">
				<p class="footer-text"><span class="copy-text">Jampack © 2022 All rights reserved.</span> <a href="#" class="" target="_blank">Privacy Policy</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">T&C</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">System Status</a></p>
			</div>
			<div class="col-xl-4">
				<a href="#" class="footer-extr-link"><span class="feather-icon"><i data-feather="external-link"></i></span><u>Send feedback to our help forum</u></a>
			</div>
		</div>
	</footer>
</div>
<template>
    <div class="hk-footer">
        <footer class="container-xxl footer py-0">
            <div class="row">
                <div class="col-xl-8">
                    <p class="footer-text"><span class="copy-text">Jampack © 2022 All rights reserved.</span> <a href="#" class="" target="_blank">Privacy Policy</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">T&C</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">System Status</a></p>
                </div>
                <div class="col-xl-4">
                    <a href="#" class="footer-extr-link"><span class="feather-icon"><i data-feather="external-link"></i></span><u>Send feedback to our help forum</u></a>
                </div>
            </div>
        </footer>
    </div>
</template>
<template>
    <div class="hk-footer">
        <footer class="container-xxl footer py-0">
            <div class="row">
                <div class="col-xl-8">
                    <p class="footer-text"><span class="copy-text">Jampack © 2022 All rights reserved.</span> <a href="#" class="" target="_blank">Privacy Policy</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">T&C</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">System Status</a></p>
                </div>
                <div class="col-xl-4">
                    <a href="#" class="footer-extr-link"><span class="feather-icon"><i data-feather="external-link"></i></span><u>Send feedback to our help forum</u></a>
                </div>
            </div>
        </footer>
    </div>
</template>
<div class="hk-footer">
	<footer class="container-xxl footer py-0">
		<div class="row">
			<div class="col-xl-8">
				<p class="footer-text"><span class="copy-text">Jampack © 2022 All rights reserved.</span> <a href="#" class="" target="_blank">Privacy Policy</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">T&C</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">System Status</a></p>
			</div>
			<div class="col-xl-4">
				<a href="#" class="footer-extr-link"><span class="feather-icon"><i data-feather="external-link"></i></span><u>Send feedback to our help forum</u></a>
			</div>
		</div>
	</footer>
</div>
Footer complex

Add data-footer="complex" in wrapper class and paste below snippet in <!-- Page Footer --> section.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
brand

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Quick links
About usTermsJobsDeveloper Jobs
Quick links
Contact UsBlogTestimonialsFaq
Quick links
DocumentationSupportLegal TermsHelp

Jampack © 2022 All rights reserved. Privacy Policy|T&C|System Status

<div class="hk-footer">
	<footer class="container-xxl footer">
		<div class="row h-auto">
			<div class="col-xl-6">
				<a class="footer-brand" href="#">
					<img class="brand-img d-inline-block img-fluid" src="dist/img/logo-light.svg" alt="brand" />
				</a>
				<p class="footer-info-text">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
			</div>
			<div class="col-xl-6">
				<div class="row">
					<div class="col-md-4">
						<h6 class="quick-links-head">Quick links</h6>
						<a href="#" class="quick-links">About us</a>
						<a href="#" class="quick-links">Terms</a>
						<a href="#" class="quick-links">Jobs</a>
						<a href="#" class="quick-links">Developer Jobs</a>
					</div>
					<div class="col-md-4">
						<h6 class="quick-links-head">Quick links</h6>
						<a href="#" class="quick-links">Contact Us</a>
						<a href="#" class="quick-links">Blog</a>
						<a href="#" class="quick-links">Testimonials</a>
						<a href="#" class="quick-links">Faq</a>
					</div>
					<div class="col-md-4">
					<h6 class="quick-links-head">Quick links</h6>
						<a href="#" class="quick-links">Documentation</a>
						<a href="#" class="quick-links">Support</a>
						<a href="#" class="quick-links">Legal Terms</a>
						<a href="#" class="quick-links">Help</a>
					</div>
				</div>
			</div>
		</div>
		<div class="row h-auto">
			<div class="col-xl-8">
				<p class="footer-text"><span class="copy-text">Jampack © 2022 All rights reserved.</span> <a href="#" class="" target="_blank">Privacy Policy</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">T&C</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">System Status</a></p>
			</div>
			<div class="col-xl-4">
				<div class="footer-social-btn-wrap">
					<a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-facebook"></i></span></a>
					<a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-linkedin"></i></span></a>
					<a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-google"></i></span></a>
					<a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-twitter"></i></span></a>
				</div>
			</div>
		</div>
	</footer>
</div>
<template>
    <div class="hk-footer">
        <footer class="container-xxl footer">
            <div class="row h-auto">
                <div class="col-xl-6">
                    <a class="footer-brand" href="#">
                        <img class="brand-img d-inline-block img-fluid" src="dist/img/logo-light.svg" alt="brand" />
                    </a>
                    <p class="footer-info-text">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                </div>
                <div class="col-xl-6">
                    <div class="row">
                        <div class="col-md-4">
                            <h6 class="quick-links-head">Quick links</h6>
                            <a href="#" class="quick-links">About us</a>
                            <a href="#" class="quick-links">Terms</a>
                            <a href="#" class="quick-links">Jobs</a>
                            <a href="#" class="quick-links">Developer Jobs</a>
                        </div>
                        <div class="col-md-4">
                            <h6 class="quick-links-head">Quick links</h6>
                            <a href="#" class="quick-links">Contact Us</a>
                            <a href="#" class="quick-links">Blog</a>
                            <a href="#" class="quick-links">Testimonials</a>
                            <a href="#" class="quick-links">Faq</a>
                        </div>
                        <div class="col-md-4">
                        <h6 class="quick-links-head">Quick links</h6>
                            <a href="#" class="quick-links">Documentation</a>
                            <a href="#" class="quick-links">Support</a>
                            <a href="#" class="quick-links">Legal Terms</a>
                            <a href="#" class="quick-links">Help</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row h-auto">
                <div class="col-xl-8">
                    <p class="footer-text"><span class="copy-text">Jampack © 2022 All rights reserved.</span> <a href="#" class="" target="_blank">Privacy Policy</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">T&C</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">System Status</a></p>
                </div>
                <div class="col-xl-4">
                    <div class="footer-social-btn-wrap">
                        <a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-facebook"></i></span></a>
                        <a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-linkedin"></i></span></a>
                        <a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-google"></i></span></a>
                        <a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-twitter"></i></span></a>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</template>
<template>
    <div class="hk-footer">
        <footer class="container-xxl footer">
            <div class="row h-auto">
                <div class="col-xl-6">
                    <a class="footer-brand" href="#">
                        <img class="brand-img d-inline-block img-fluid" src="dist/img/logo-light.svg" alt="brand" />
                    </a>
                    <p class="footer-info-text">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                </div>
                <div class="col-xl-6">
                    <div class="row">
                        <div class="col-md-4">
                            <h6 class="quick-links-head">Quick links</h6>
                            <a href="#" class="quick-links">About us</a>
                            <a href="#" class="quick-links">Terms</a>
                            <a href="#" class="quick-links">Jobs</a>
                            <a href="#" class="quick-links">Developer Jobs</a>
                        </div>
                        <div class="col-md-4">
                            <h6 class="quick-links-head">Quick links</h6>
                            <a href="#" class="quick-links">Contact Us</a>
                            <a href="#" class="quick-links">Blog</a>
                            <a href="#" class="quick-links">Testimonials</a>
                            <a href="#" class="quick-links">Faq</a>
                        </div>
                        <div class="col-md-4">
                        <h6 class="quick-links-head">Quick links</h6>
                            <a href="#" class="quick-links">Documentation</a>
                            <a href="#" class="quick-links">Support</a>
                            <a href="#" class="quick-links">Legal Terms</a>
                            <a href="#" class="quick-links">Help</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row h-auto">
                <div class="col-xl-8">
                    <p class="footer-text"><span class="copy-text">Jampack © 2022 All rights reserved.</span> <a href="#" class="" target="_blank">Privacy Policy</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">T&C</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">System Status</a></p>
                </div>
                <div class="col-xl-4">
                    <div class="footer-social-btn-wrap">
                        <a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-facebook"></i></span></a>
                        <a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-linkedin"></i></span></a>
                        <a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-google"></i></span></a>
                        <a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-twitter"></i></span></a>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</template>
<div class="hk-footer">
	<footer class="container-xxl footer">
		<div class="row h-auto">
			<div class="col-xl-6">
				<a class="footer-brand" href="#">
					<img class="brand-img d-inline-block img-fluid" src="dist/img/logo-light.svg" alt="brand" />
				</a>
				<p class="footer-info-text">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
			</div>
			<div class="col-xl-6">
				<div class="row">
					<div class="col-md-4">
						<h6 class="quick-links-head">Quick links</h6>
						<a href="#" class="quick-links">About us</a>
						<a href="#" class="quick-links">Terms</a>
						<a href="#" class="quick-links">Jobs</a>
						<a href="#" class="quick-links">Developer Jobs</a>
					</div>
					<div class="col-md-4">
						<h6 class="quick-links-head">Quick links</h6>
						<a href="#" class="quick-links">Contact Us</a>
						<a href="#" class="quick-links">Blog</a>
						<a href="#" class="quick-links">Testimonials</a>
						<a href="#" class="quick-links">Faq</a>
					</div>
					<div class="col-md-4">
					<h6 class="quick-links-head">Quick links</h6>
						<a href="#" class="quick-links">Documentation</a>
						<a href="#" class="quick-links">Support</a>
						<a href="#" class="quick-links">Legal Terms</a>
						<a href="#" class="quick-links">Help</a>
					</div>
				</div>
			</div>
		</div>
		<div class="row h-auto">
			<div class="col-xl-8">
				<p class="footer-text"><span class="copy-text">Jampack © 2022 All rights reserved.</span> <a href="#" class="" target="_blank">Privacy Policy</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">T&C</a><span class="footer-link-sep">|</span><a href="#" class="" target="_blank">System Status</a></p>
			</div>
			<div class="col-xl-4">
				<div class="footer-social-btn-wrap">
					<a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-facebook"></i></span></a>
					<a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-linkedin"></i></span></a>
					<a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-google"></i></span></a>
					<a href="#" class="btn btn-icon btn-rounded btn-soft-light btn-sm"><span class="icon"><i class="fab fa-twitter"></i></span></a>
				</div>
			</div>
		</div>
	</footer>
</div>
Jump to