How to Create Simple Bootstrap Footer

Advertisement

Bootstrap provides fast and easy CSS styles you can use to create website footers. Today, you will be creating two easy to make Bootstrap footers.

The simplest Bootstrap footer to make is the copyright footer. It only contains the copyright notice and nothing else. The HTML code for Bootstrap copyright footer is:

<!-- Footer -->
  <footer class="bg-light text-center text-lg-start">
    <!-- Copyright Footer -->
    <div class="text-center p-3">
      &copy; 2021 Copyright:
      <a class="text-dark" href="https://devpractical.com/">Devpractical.com</a>
    </div>
    <!-- Copyright Footer-->
  </footer>
<!-- Footer -->

Results Screenshot On Mobile and Desktop Devices

Simple Bootstrap Footer Screenshot

View Result

Download Simple Bootstrap 4 Footer

For legal purposes, its important you add links to legal notices on you website. Bootstrap allows you to add these links seamlessly. You can add them using the following code:

<footer class="text-center bg-light">
      <!-- Grid container -->
      <div class="container pt-4">
        <!-- Section: simple footer links -->
        <section class="mb-4">
          <a href="#!" class="text-dark">About</a>
          <a href="#!" class="text-dark">Disclaimer</a>
          <a href="#!" class="text-dark">Privacy Policy</a>
        </section>
        <!-- Section: Simple footer links -->
      </div>
      <!-- Grid container -->

      <!-- Copyright Footer -->
      <div class="text-center p-3">
        &copy; 2021 Copyright:
        <a class="text-dark" href="https://devpractical.com/">Devpractical.com</a>
      </div>
      <!-- Copyright Footer-->
    </footer>

Results Screenshot On Mobile and Desktop Devices

Simple Bootstrap Footer With Links screenshot

View Result

author's bio photo

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.