Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

Footer

One more short and simple lesson in which we will add a Footer with a form for subscribing to our blog's newsletter.

Step 1 - set a color of the footer element

We set a color of the footer element via inline CSS:

<!--Footer-->
<footer style="background-color: hsl(0, 0%, 96%)">

</footer>
<!--Footer-->
Step 2 - add copyright

Let's add a copyright to the footer. Note, that we apply a background color via hsla color format. This will work as a mask - that means it will be a bit more darker than the footer itself, but in the same shade.

<!--Footer-->
<footer style="background-color: hsl(0, 0%, 96%)">

  <!-- Copyright -->
  <div class="text-center p-3" style="background-color: hsla(0, 0%, 0%, 0.2);">
    © 2023 Copyright:
    <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
  </div>
  <!-- Copyright -->

</footer>
<!--Footer-->
Step 3 - add a form

Let's add a .container with a form inside. Then divide it into 3 columns - one for a text, one for an input and one for a button.

We also add a flex utilities justify-content-center and align-items-center to the .row to center the form elements vertically and horizontally.

About the form itself - we have learned about the form in the previous tutorial, so if you need to refresh your knowledge I recommend you to have a look at this lesson.

<!--Footer-->
<footer style="background-color: hsl(0, 0%, 96%)">

  <!-- Grid container -->
  <div class="container p-4 pb-0">
    <form action="">
      <!--Grid row-->
      <div class="row justify-content-center align-items-center">
        <!--Grid column-->
        <div class="col-auto">
          <p class="pb-2">
            Sign up for my newsletter
          </p>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-md-5 col-12">
          <!-- Email input -->
          <div class="form-outline mb-4" data-mdb-input-init>
            <input type="email" id="form5Example27" class="form-control" />
            <label class="form-label" for="form5Example27">Email address</label>
          </div>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-auto">
          <!-- Submit button -->
          <button data-mdb-ripple-init type="submit" class="btn btn-dark btn-rounded mb-4">
            Subscribe
          </button>
        </div>
        <!--Grid column-->
      </div>
      <!--Grid row-->
    </form>
  </div>
  <!-- Grid container -->

  <!-- Copyright -->
  <div class="text-center p-3" style="background-color: hsla(0, 0%, 0%, 0.2);">
    © 2023 Copyright:
    <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
  </div>
  <!-- Copyright -->

</footer>
<!--Footer-->

Sign up for my newsletter

© 2023 Copyright: MDBootstrap.com
Demo and source code for this lesson
John Doe

About author

Michal Szymanski
@ascensus_mdb

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.