Footer
Angular Bootstrap 5 Footer
A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.
Basic example
A basic example of the simple footer with text, links and copyright section.
The background color is set via CSS class .bg-light. 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;"
We put a mask on the copyrights section using RGBA code to outstand it. You can change the intensity of its color by manipulating the last value in the RGBA code.
<!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
<!-- Section: Social media -->
<section
class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom"
>
<!-- 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 -->
<!-- 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 -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2021 Copyright:
<a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Advanced example
An advanced example of Bootstrap Footer.
We also applied a dark background by using
.bg-dark class. With such settings, it's necessary to use
.text-white for typography and links, .btn-outline-light for
buttons, and .form-white for the form.
In the following examples we use mdbRipple directive and Input component.
Be sure to import MdbRippleModule and MdbFormsModule
<!-- Footer -->
<footer class="bg-dark text-center text-white">
<!-- Grid container -->
<div class="container p-4">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a mdbRipple class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-facebook-f"></i
></a>
<!-- Twitter -->
<a mdbRipple class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-twitter"></i
></a>
<!-- Google -->
<a mdbRipple class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-google"></i
></a>
<!-- Instagram -->
<a mdbRipple class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-instagram"></i
></a>
<!-- Linkedin -->
<a mdbRipple class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-linkedin-in"></i
></a>
<!-- Github -->
<a mdbRipple class="btn btn-outline-light btn-floating m-1" 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 -->
<mdb-form-control class="form-white mb-4">
<input mdbInput type="email" id="form5Example24" class="form-control" />
<label mdbLabel class="form-label" for="form5Example24">Email address</label>
</mdb-form-control>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-auto">
<!-- Submit button -->
<button mdbRipple type="submit" class="btn btn-outline-light 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-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">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">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">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-->
</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);">
© 2020 Copyright:
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Supported content
Footers can hold multiple different components. Below are a few of the most common examples of footer usage.
Copyrights
As mentioned before - we put a mask on the copyrights section using RGBA code to outstand it. You can change the intensity of its color by manipulating the last value in the RGBA code.
<footer class="bg-light text-center text-lg-start">
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2020 Copyright:
<a class="text-dark" 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-light 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-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 mb-0">Links</h5>
<ul class="list-unstyled">
<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 mb-0">Links</h5>
<ul class="list-unstyled">
<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-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2020 Copyright:
<a class="text-dark" 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-light 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.2);">
© 2020 Copyright:
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
Images
For more advanced images options have a look at the Images docs .
In the following examples we use mdbRipple directive to add waves effect to the
buttons.
Add MdbRippleModule import to your module to enable this effect.
<footer class="text-center text-white" style="background-color: #caced1;">
<!-- 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
mdbRipple
rippleColor="light"
class="bg-image hover-overlay ripple shadow-1-strong rounded"
>
<img
src="https://mdbootstrap.com/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
mdbRipple
rippleColor="light"
class="bg-image hover-overlay ripple shadow-1-strong rounded"
>
<img
src="https://mdbootstrap.com/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
mdbRipple
rippleColor="light"
class="bg-image hover-overlay ripple shadow-1-strong rounded"
>
<img
src="https://mdbootstrap.com/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
mdbRipple
rippleColor="light"
class="bg-image hover-overlay ripple shadow-1-strong rounded"
>
<img
src="https://mdbootstrap.com/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
mdbRipple
rippleColor="light"
class="bg-image hover-overlay ripple shadow-1-strong rounded"
>
<img
src="https://mdbootstrap.com/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
mdbRipple
rippleColor="light"
class="bg-image hover-overlay ripple shadow-1-strong rounded"
>
<img
src="https://mdbootstrap.com/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.2);">
© 2020 Copyright:
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
Iframe (embeds)
For more advanced iframe options have a look at the Ratio docs .
<footer class="text-center text-white" style="background-color: #45637d;">
<!-- Grid container -->
<div class="container p-4">
<!-- Section: Iframe -->
<section class="">
<div class="row d-flex justify-content-center">
<div class="col-lg-6">
<div class="ratio ratio-16x9">
<iframe
class="shadow-1-strong rounded"
src="https://www.youtube.com/embed/vlDzYIIOYmM"
title="YouTube video"
allowfullscreen
></iframe>
</div>
</div>
</div>
</section>
<!-- Section: Iframe -->
</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>
Icons
For more advanced icon options have a look at the Icons docs and Buttons docs.
In the following examples we use mdbRipple directive to add waves effect to the
buttons.
Add MdbRippleModule import to your module to enable this effect.
<footer class="text-center text-white" style="background-color: #f1f1f1;">
<!-- Grid container -->
<div class="container pt-4">
<!-- Section: Social media -->
<section class="mb-4">
<!-- Facebook -->
<a
mdbRipple
rippleColor="dark"
class="btn btn-link btn-floating btn-lg text-dark m-1"
href="#!"
role="button"
><i class="fab fa-facebook-f"></i
></a>
<!-- Twitter -->
<a
mdbRipple
rippleColor="dark"
class="btn btn-link btn-floating btn-lg text-dark m-1"
href="#!"
role="button"
><i class="fab fa-twitter"></i
></a>
<!-- Google -->
<a
mdbRipple
rippleColor="dark"
class="btn btn-link btn-floating btn-lg text-dark m-1"
href="#!"
role="button"
><i class="fab fa-google"></i
></a>
<!-- Instagram -->
<a
mdbRipple
rippleColor="dark"
class="btn btn-link btn-floating btn-lg text-dark m-1"
href="#!"
role="button"
><i class="fab fa-instagram"></i
></a>
<!-- Linkedin -->
<a
mdbRipple
rippleColor="dark"
class="btn btn-link btn-floating btn-lg text-dark m-1"
href="#!"
role="button"
><i class="fab fa-linkedin"></i
></a>
<!-- Github -->
<a
mdbRipple
rippleColor="dark"
class="btn btn-link btn-floating btn-lg text-dark m-1"
href="#!"
role="button"
><i class="fab fa-github"></i
></a>
</section>
<!-- Section: Social media -->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center text-dark p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2020 Copyright:
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
Call to action
An example of Call to Action scheme within the Footer.
In the following examples we use mdbRipple directive to add waves effect to the
buttons.
Add MdbRippleModule import to your module to enable this effect.
<!-- Footer -->
<footer class="text-center text-white" style="background-color: #0a4275;">
<!-- Grid container -->
<div class="container p-4 pb-0">
<!-- Section: CTA -->
<section class="">
<p class="d-flex justify-content-center align-items-center">
<span class="me-3">Register for free</span>
<button mdbRipple type="button" class="btn btn-outline-light btn-rounded">
Sign up!
</button>
</p>
</section>
<!-- Section: CTA -->
</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>
<!-- Footer -->
Forms
Simple usage of the inline form within the Footer and with use of the grid. By default it's left aligned.
For more advanced icon options have a look at the Forms docs and Grid docs.
In the following examples we use mdbRipple directive and Input component.
Be sure to import MdbRippleModule and MdbFormsModule
<footer class="bg-light text-center text-lg-start">
<!-- Grid container -->
<div class="container p-4 pb-0">
<form action="">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-auto mb-4 mb-md-0">
<p class="pt-2">
<strong>Sign up for our newsletter</strong>
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-5 col-12 mb-4 mb-md-0">
<!-- Email input -->
<mdb-form-control class="mb-4">
<input mdbInput type="email" id="form5Example25" class="form-control" />
<label mdbLabel class="form-label" for="form5Example25">Email address</label>
</mdb-form-control>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-auto mb-4 mb-md-0">
<!-- Submit button -->
<button mdbRipple type="submit" class="btn btn-primary mb-4">
Subscribe
</button>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</form>
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2020 Copyright:
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
Form centered
An example of centered form within the Footer.
For more advanced icon options have a look at the Horizontal alignment docs.
In the following examples we use mdbRipple directive and Input component.
Be sure to import MdbRippleModule and MdbFormsModule
<footer class="bg-light text-center">
<!-- Grid container -->
<div class="container p-4 pb-0">
<!-- 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 -->
<mdb-form-control class="mb-4">
<input mdbInput type="email" id="form5Example27" class="form-control" />
<label mdbLabel class="form-label" for="form5Example27">Email address</label>
</mdb-form-control>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-auto">
<!-- Submit button -->
<button mdbRipple type="submit" class="btn btn-primary mb-4">
Subscribe
</button>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</form>
</section>
<!-- Section: Form -->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2020 Copyright:
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
Form dark theme
An example of dark theme Footer with the form inside
To use forms properly on a dark background add
.text-white for typography and links, .btn-outline-light for
buttons, and .form-white for the form.
For more advanced icon options have a look at the Colors docs and Theme docs.
In the following examples we use mdbRipple directive and Input component.
Be sure to import MdbRippleModule and MdbFormsModule
<footer class="bg-dark text-center text-white">
<!-- Grid container -->
<div class="container p-4 pb-0">
<!-- 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 -->
<mdb-form-control class="form-white mb-4">
<input mdbInput type="email" id="form5Example28" class="form-control" />
<label mdbLabel class="form-label" for="form5Example28">Email address</label>
</mdb-form-control>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-auto">
<!-- Submit button -->
<button mdbRipple type="submit" class="btn btn-outline-light mb-4">
Subscribe
</button>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</form>
</section>
<!-- Section: Form -->
</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>
Colors
As mentioned before - the background color is set via CSS class
.bg-light. 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 color 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>
Alignment
By default, all elements inside the Footer are left-aligned on every screen size. However, you can easily change it and center it on all screen sizes or only on the specific breakpoint.
For more advanced icon options have a look at the Alignment docs.
Left-aligned
Default left-aligned Footer
<!-- Footer -->
<footer class="bg-secondary text-white">
<!-- 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>
<!-- Footer -->
Always centered
Add .text-center class to the footer element to center the
content.
<!-- Footer -->
<footer class="bg-secondary text-white text-center">
<!-- 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>
<!-- Footer -->
Centered on small
To center elements of the Footer only on small screens add
.text-center .text-md-start classes to the footer element.
With these classes, elements will only be centered on screens smaller than
768 px wide. On larger screens, they will be left-aligned by default.
To learn more about Bootstrap breakpoints read Breakpoints docs.
<!-- Footer -->
<footer class="bg-secondary text-white text-center text-md-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>
<!-- Footer -->