<!-- Footer -->
<footer class="bg-light text-center">
<!-- Grid container -->
<div class="container p-4">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a
class="btn btn-primary btn-floating m-1"
style="background-color: #3b5998"
href="#!"
role="button"
><i class="fab fa-facebook-f"></i
></a>
<!-- Twitter -->
<a
class="btn btn-primary btn-floating m-1"
style="background-color: #55acee"
href="#!"
role="button"
><i class="fab fa-twitter"></i
></a>
<!-- Google -->
<a
class="btn btn-primary btn-floating m-1"
style="background-color: #dd4b39"
href="#!"
role="button"
><i class="fab fa-google"></i
></a>
<!-- Instagram -->
<a
class="btn btn-primary btn-floating m-1"
style="background-color: #ac2bac"
href="#!"
role="button"
><i class="fab fa-instagram"></i
></a>
<!-- Linkedin -->
<a
class="btn btn-primary btn-floating m-1"
style="background-color: #0082ca"
href="#!"
role="button"
><i class="fab fa-linkedin-in"></i
></a>
<!-- Github -->
<a
class="btn btn-primary btn-floating m-1"
style="background-color: #333333"
href="#!"
role="button"
><i class="fab fa-github"></i
></a>
</section>
<!-- Section: Social media -->
<!-- Section: Form -->
<section class="">
<form action="">
<!--Grid row-->
<div class="row d-flex justify-content-center">
<!--Grid column-->
<div class="col-auto">
<p class="pt-2">
<strong>Sign up for our newsletter</strong>
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-5 col-12">
<!-- Email input -->
<div class="form-outline mb-4">
<input
type="email"
id="form5Example2"
class="form-control"
/>
<label class="form-label" for="form5Example2"
>Email address</label
>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-auto">
<!-- Submit button -->
<button v-else type="submit" class="btn btn-primary mb-4">
Subscribe
</button>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</form>
</section>
<!-- Section: Form -->
<!-- Section: Text -->
<section class="mb-4">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt
distinctio earum repellat quaerat voluptatibus placeat nam,
commodi optio pariatur est quia magnam eum harum corrupti dicta,
aliquam sequi voluptate quas.
</p>
</section>
<!-- Section: Text -->
<!-- Section: Links -->
<section class="">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled mb-0">
<li>
<a href="#!" class="text-dark">Link 1</a>
</li>
<li>
<a href="#!" class="text-dark">Link 2</a>
</li>
<li>
<a href="#!" class="text-dark">Link 3</a>
</li>
<li>
<a href="#!" class="text-dark">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled mb-0">
<li>
<a href="#!" class="text-dark">Link 1</a>
</li>
<li>
<a href="#!" class="text-dark">Link 2</a>
</li>
<li>
<a href="#!" class="text-dark">Link 3</a>
</li>
<li>
<a href="#!" class="text-dark">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled mb-0">
<li>
<a href="#!" class="text-dark">Link 1</a>
</li>
<li>
<a href="#!" class="text-dark">Link 2</a>
</li>
<li>
<a href="#!" class="text-dark">Link 3</a>
</li>
<li>
<a href="#!" class="text-dark">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled mb-0">
<li>
<a href="#!" class="text-dark">Link 1</a>
</li>
<li>
<a href="#!" class="text-dark">Link 2</a>
</li>
<li>
<a href="#!" class="text-dark">Link 3</a>
</li>
<li>
<a href="#!" class="text-dark">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!-- Section: Links -->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div
class="text-center p-3"
style="background-color: rgba(0, 0, 0, 0.2)"
>
© 2021 Copyright:
<a class="text-dark" href="https://mdbootstrap.com/"
>MDBootstrap.com</a
>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
How to use it?
1. Download MDB 5 - free UI KIT
2. Create the Footer you like
3. Copy the generated code and paste it into the MDB project