<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 58
- Banners 15
- Blog 84
- Call to action 99
- Careers 8
- Contact 42
- Content 62
- Cookies 48
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 49
- Features 140
- Footers 58
- Graphs 18
- HTTP codes 55
- Hero section 96
- How it works 46
- Logo clouds 80
- Modals 6
- Navbar 68
- Navigation (horizontal) 97
- Navigation (vertical) 6
- Newsletter 49
- Portfolio 39
- Pricing 47
- Projects 9
- Reviews 5
- Rich text 3
- Sign in / Sign up 81
- Stats 84
- Tables 57
- Team 46
- Testimonials 46
- 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.
