<section class="position-relative py-24 bg-white overflow-hidden">
<img class="position-absolute bottom-0 start-0" src="gradia-assets/elements/footers/radial.svg" alt="">
<div class="position-relative container" style="z-index: 50;">
<div class="row g-16">
<div class="col-12 col-md-6 col-lg-6">
<div class="d-flex flex-column justify-content-between h-100">
<div class="mb-16">
<a class="d-inline-block" href="#">
<img class="img-fluid" src="gradia-assets/logos/gradia-name-black.svg" alt="">
</a>
</div>
<div>
<h3 class="fs-18 fw-medium mb-4">The boldest SaaS kit in the market.</h3>
<p class="fs-19 text-muted mb-0">© Copyright 2022. All Rights Reserved by Gradia.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-2">
<h3 class="fs-20 fw-semibold text-dark text-uppercase mb-9" style="letter-spacing: 1px;">Company</h3>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a class="nav-link px-0" href="#">
<h3 class="fs-18 fw-medium mb-0">Features</h3>
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link px-0" href="#">
<h3 class="fs-18 fw-medium mb-0">Pricing</h3>
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link px-0" href="#">
<h3 class="fs-18 fw-medium mb-0">Affiliate Program</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-0" href="#">
<h3 class="fs-18 fw-medium mb-0">Press Kit</h3>
</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-2">
<h3 class="fs-20 fw-semibold text-dark text-uppercase mb-9" style="letter-spacing: 1px;">Support</h3>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a class="nav-link px-0" href="#">
<h3 class="fs-18 fw-medium mb-0">Account</h3>
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link px-0" href="#">
<h3 class="fs-18 fw-medium mb-0">Help</h3>
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link px-0" href="#">
<h3 class="fs-18 fw-medium mb-0">Contact Us</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-0" href="#">
<h3 class="fs-18 fw-medium mb-0">Customer Support</h3>
</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-2">
<h3 class="fs-20 fw-semibold text-dark text-uppercase mb-9" style="letter-spacing: 1px;">Legals</h3>
<ul class="nav flex-column">
<li class="nav-item mb-2">
<a class="nav-link px-0" href="#">
<h3 class="fs-18 fw-medium mb-0">Terms & Conditions</h3>
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link px-0" href="#">
<h3 class="fs-18 fw-medium mb-0">Privacy Policy</h3>
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link px-0" href="#">
<h3 class="fs-18 fw-medium mb-0">Licensing</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>Framework
Bootstrap
UI Library
All Libraries
Components
- Alert 85
- Application 53
- Banners 15
- Blog 56
- Call to action 95
- Careers 4
- Contact 38
- Content 59
- Cookies 41
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 43
- Features 132
- Footers 53
- Graphs 18
- HTTP codes 48
- Hero section 91
- How it works 43
- Logo clouds 72
- Modals 3
- Navbar 68
- Navigation (horizontal) 92
- Navigation (vertical) 6
- Newsletter 45
- Portfolio 39
- Pricing 43
- Projects 9
- Reviews 5
- Sign in / Sign up 71
- Stats 76
- Tables 57
- Team 41
- Testimonials 41
- Users 25
Footer is the place where you will put the site navigation and all the relevant information. That is why it is worth putting some effort into its design, prioritizing vital information and links over the less important ones.
Choose from many variants of Bootstrap components footers. The variants shown here are available in various UI libraries in the Shuffle Editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Bootstrap website template. Each library is designed by a professional designer and coded by our team of developers.
Get access to all Bootstrap components footers section, code and our editor. Try the demo for free.
