Free UI/UX design course
Learn how to create exceptional designs by reading my new tutorial.
Start learningFooter
A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements. It is placed at the bottom of your website.
Footers can hold multiple different components. Let's go through the most popular ones one by one.
Copyrights
This is probably the most important part of any footer.
We put a mask on the copyrights section using RGBA or HSLA code to outstand it. You can change the intensity of its color by manipulating the last value in the RGBA / HSLA code.
<footer class="bg-body-tertiary text-center text-lg-start">
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.05);">
© 2020 Copyright:
<a class="text-body" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
Links
You can adjust the number of the columns by using grid system.
<footer class="bg-body-tertiary text-center text-lg-start">
<!-- Grid container -->
<div class="container p-4">
<!--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-body">Link 1</a>
</li>
<li>
<a href="#!" class="text-body">Link 2</a>
</li>
<li>
<a href="#!" class="text-body">Link 3</a>
</li>
<li>
<a href="#!" class="text-body">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 mb-0">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!" class="text-body">Link 1</a>
</li>
<li>
<a href="#!" class="text-body">Link 2</a>
</li>
<li>
<a href="#!" class="text-body">Link 3</a>
</li>
<li>
<a href="#!" class="text-body">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-body">Link 1</a>
</li>
<li>
<a href="#!" class="text-body">Link 2</a>
</li>
<li>
<a href="#!" class="text-body">Link 3</a>
</li>
<li>
<a href="#!" class="text-body">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 mb-0">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!" class="text-body">Link 1</a>
</li>
<li>
<a href="#!" class="text-body">Link 2</a>
</li>
<li>
<a href="#!" class="text-body">Link 3</a>
</li>
<li>
<a href="#!" class="text-body">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.05);">
© 2020 Copyright:
<a class="text-body" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
Text
For more advanced text options have a look at the Typography docs or Text utilities docs .
<footer class="bg-body-tertiary text-center text-lg-start">
<!-- Grid container -->
<div class="container p-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Footer text</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Footer text</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.05);">
© 2020 Copyright:
<a class="text-body" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
Images
For more advanced images options have a look at the Images docs .
<footer class="bg-body-tertiary text-center">
<!-- Grid container -->
<div class="container p-4">
<!-- Section: Images -->
<section class="">
<div class="row">
<div class="col-lg-2 col-md-12 mb-4 mb-md-0">
<div data-mdb-ripple-init
class="bg-image hover-overlay shadow-1-strong rounded"
data-ripple-color="light"
>
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="w-100" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
<div class="col-lg-2 col-md-12 mb-4 mb-md-0">
<div data-mdb-ripple-init
class="bg-image hover-overlay shadow-1-strong rounded"
data-ripple-color="light"
>
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/111.webp" class="w-100" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
<div class="col-lg-2 col-md-12 mb-4 mb-md-0">
<div data-mdb-ripple-init
class="bg-image hover-overlay shadow-1-strong rounded"
data-ripple-color="light"
>
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/112.webp" class="w-100" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
<div class="col-lg-2 col-md-12 mb-4 mb-md-0">
<div data-mdb-ripple-init
class="bg-image hover-overlay shadow-1-strong rounded"
data-ripple-color="light"
>
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/114.webp" class="w-100" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
<div class="col-lg-2 col-md-12 mb-4 mb-md-0">
<div data-mdb-ripple-init
class="bg-image hover-overlay shadow-1-strong rounded"
data-ripple-color="light"
>
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/115.webp" class="w-100" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
<div class="col-lg-2 col-md-12 mb-4 mb-md-0">
<div data-mdb-ripple-init
class="bg-image hover-overlay shadow-1-strong rounded"
data-ripple-color="light"
>
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/116.webp" class="w-100" />
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
</div>
</section>
<!-- Section: Images -->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.05);">
© 2020 Copyright:
<a class="text-body" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
Icons
For more advanced icon options have a look at the Icons docs and Buttons docs.
<footer class="text-center bg-body-tertiary">
<!-- Grid container -->
<div class="container pt-4">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a
data-mdb-ripple-init
class="btn btn-link btn-floating btn-lg text-body m-1"
href="#!"
role="button"
data-mdb-ripple-color="dark"
><i class="fab fa-facebook-f"></i
></a>
<!-- Twitter -->
<a
data-mdb-ripple-init
class="btn btn-link btn-floating btn-lg text-body m-1"
href="#!"
role="button"
data-mdb-ripple-color="dark"
><i class="fab fa-twitter"></i
></a>
<!-- Google -->
<a
data-mdb-ripple-init
class="btn btn-link btn-floating btn-lg text-body m-1"
href="#!"
role="button"
data-mdb-ripple-color="dark"
><i class="fab fa-google"></i
></a>
<!-- Instagram -->
<a
data-mdb-ripple-init
class="btn btn-link btn-floating btn-lg text-body m-1"
href="#!"
role="button"
data-mdb-ripple-color="dark"
><i class="fab fa-instagram"></i
></a>
<!-- Linkedin -->
<a
data-mdb-ripple-init
class="btn btn-link btn-floating btn-lg text-body m-1"
href="#!"
role="button"
data-mdb-ripple-color="dark"
><i class="fab fa-linkedin"></i
></a>
<!-- Github -->
<a
data-mdb-ripple-init
class="btn btn-link btn-floating btn-lg text-body m-1"
href="#!"
role="button"
data-mdb-ripple-color="dark"
><i class="fab fa-github"></i
></a>
</section>
<!-- Section: Social media -->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.05);">
© 2020 Copyright:
<a class="text-body" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
Colors
By default the background color is set via CSS class
.bg-body-tertiary which is as a very light grey in a light mode, and light dark in a dark mode. If you don't want / don't need switching between light/dark modes you can set your own color choosing from
MDB color palette
or by setting a completely custom color via inline CSS, for example
style="background-color: #9933CC;"
When changing the color of the footer to the darker remember to change also the color of the containing elements.
In the example below, we add .text-white class to change the color of the text to
white and we replace .text-dark class in the links to .text-white as
well.
<footer class="bg-primary text-white text-center text-lg-start">
<!-- Grid container -->
<div class="container p-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Footer Content</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</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-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">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 mb-0">Links</h5>
<ul class="list-unstyled">
<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2020 Copyright:
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
Note: Footers have many options available. If you want to know more about them, read the footer documentation page or check out our footer generator tool.
Step 1 - create footer and add it to the project
Using the knowledge above, let's create a footer containing copyrights, links, text and icons.
We will not go into details here, because each of the elements and functionalities used in the footer has already been discussed in this and previous lessons.
<!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
<div class="container">
<!-- Section: Social media -->
<section class="d-flex justify-content-center justify-content-lg-between p-4 pb-1">
<!-- Left -->
<div class="me-5 d-none d-lg-block">
<span>Get connected with us on social networks:</span>
</div>
<!-- Left -->
<!-- Right -->
<div>
<a href="" class="me-4 text-reset">
<i class="fab fa-facebook-f"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-google"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-linkedin"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->
</div>
<hr class="hr">
<div class="container">
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3"></i>Company name
</h6>
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum
dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
<a href="#!" class="text-reset">Angular</a>
</p>
<p>
<a href="#!" class="text-reset">React</a>
</p>
<p>
<a href="#!" class="text-reset">Vue</a>
</p>
<p>
<a href="#!" class="text-reset">Laravel</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Useful links
</h6>
<p>
<a href="#!" class="text-reset">Pricing</a>
</p>
<p>
<a href="#!" class="text-reset">Settings</a>
</p>
<p>
<a href="#!" class="text-reset">Orders</a>
</p>
<p>
<a href="#!" class="text-reset">Help</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
<p>
<i class="fas fa-envelope me-3"></i>
info@example.com
</p>
<p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
<p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
</div>
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2022 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
About author
Michal Szymanski
Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.