Bootstrap - Footers Demo

Hello there, aspiring web developers! Today, we're going to dive into the wonderful world of Bootstrap footers. As your friendly neighborhood computer science teacher, I'm excited to guide you through this journey. So, grab your favorite beverage, get comfortable, and let's begin!

What is a footer?

Before we jump into the Bootstrap specifics, let's start with the basics. Imagine you're reading a book. What do you typically find at the bottom of each page? That's right - page numbers, sometimes chapter titles, or other helpful information. Well, in the digital world, we have something similar for websites, and we call it a footer!

A footer is a section at the bottom of a web page that contains information such as:

Copyright notices
Contact information
Links to important pages
Social media icons
Quick navigation menus
Disclaimer or privacy policy links

Think of it as the friendly farewell at the end of your web page, providing visitors with useful information before they leave or navigate to another part of your site.

Why use Bootstrap for footers?

Now, you might be wondering, "Why should I use Bootstrap for my footer?" Well, my eager students, Bootstrap is like a superhero toolkit for web developers. It provides pre-built components and styles that make creating responsive and attractive web elements a breeze. When it comes to footers, Bootstrap offers:

Responsive design out of the box
Consistent styling across different browsers
Easy-to-use grid system for layout
Pre-styled components that you can customize

Let's roll up our sleeves and see how we can create some awesome footers with Bootstrap!

Basic Bootstrap Footer

Let's start with a simple footer. Here's a code example:

<footer class="bg-light text-center text-lg-start">
  <div class="container p-4">
    <div class="row">
      <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>
      <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>
      <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>
    </div>
  </div>
  <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
    © 2023 Copyright:
    <a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
  </div>
</footer>

Let's break this down:

We start with a <footer> tag and give it some Bootstrap classes for styling.
Inside, we have a container with rows and columns (Bootstrap's grid system).
We've divided the footer into three sections: main content and two link columns.
At the bottom, we have a copyright notice.

The magic of Bootstrap classes makes this responsive, meaning it will look good on both desktop and mobile devices!

Sticky Footer

Sometimes, you want your footer to stick to the bottom of the page, especially when there's not enough content to push it down. Here's how you can create a sticky footer:

<body class="d-flex flex-column min-vh-100">
  <!-- Your main content goes here -->
  <main class="flex-shrink-0">
    <div class="container">
      <h1 class="mt-5">Sticky footer</h1>
      <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
    </div>
  </main>

  <footer class="footer mt-auto py-3 bg-light">
    <div class="container">
      <span class="text-muted">Place sticky footer content here.</span>
    </div>
  </footer>
</body>

In this example:

We use flexbox to ensure the footer stays at the bottom.
The min-vh-100 class makes sure the body takes up at least the full height of the viewport.
The mt-auto class on the footer pushes it to the bottom.

Footer with Social Icons

Let's spice things up with some social media icons! Here's an example:

<footer class="bg-dark text-center text-white">
  <div class="container p-4 pb-0">
    <section class="mb-4">
      <!-- Facebook -->
      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
        <i class="fab fa-facebook-f"></i>
      </a>

      <!-- Twitter -->
      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
        <i class="fab fa-twitter"></i>
      </a>

      <!-- Google -->
      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
        <i class="fab fa-google"></i>
      </a>

      <!-- Instagram -->
      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
        <i class="fab fa-instagram"></i>
      </a>

      <!-- LinkedIn -->
      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
        <i class="fab fa-linkedin-in"></i>
      </a>

      <!-- Github -->
      <a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
        <i class="fab fa-github"></i>
      </a>
    </section>
  </div>

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

This footer:

Uses a dark background with white text for contrast.
Includes social media icons as buttons.
Uses Font Awesome icons (make sure to include the Font Awesome library).

Conclusion

And there you have it, my wonderful students! We've explored the world of Bootstrap footers, from simple to sticky to socially savvy. Remember, footers are like the cherry on top of your web page sundae - they might be at the bottom, but they can really make your site shine!

As you continue your web development journey, don't be afraid to experiment with different footer styles. Mix and match elements, play with colors, and most importantly, have fun with it!

Here's a table summarizing the key Bootstrap classes we've used:

Class	Purpose
bg-light	Light background color
bg-dark	Dark background color
text-center	Center-align text
container	Create a responsive fixed-width container
row	Create a row for the grid system
col-lg-6, col-md-12, etc.	Define column widths for different screen sizes
list-unstyled	Remove default list styling
mt-auto	Add margin-top: auto
py-3	Add padding to top and bottom
btn	Create a button
btn-outline-light	Create an outlined light button

Keep coding, keep learning, and remember - in the world of web development, the footer is just the beginning!

Credits: Image by storyset

Previous Tutorial:

Bootstrap - Headers Demo

Next Tutorial:

Bootstrap - Heroes Demo