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.