How to create a Simple Footer using Bootstrap 5 ?

Last Updated : 05 Aug, 2024

Bootstrap 5 Footers can be used for displaying Contact links, Social media links, Service links, Company Logos, and other sections. The <footer> tag can be used with built-in classes for making the responsive footer layout. For accomplishing this task, there are 2 approaches, i.e., by using Bootstrap Grid System with CSS, and by using Bootstrap's Built-In Classes.

Table of Content

Using Bootstrap Grid System with CSS
Using Bootstrap's Built-In Classes

Using Bootstrap Grid System with CSS

The Bootstrap Grid System is a very famous component or topic for creating responsive website layouts. By using Rows and Columns classes we can create a basic grid system. Every row has only 12 columns and every column has different breakpoints for providing responsive behavior in various screen sizes. Below we create a basic footer page using Bootstrap and it is responsive also. For creating a footer we have an HTML footer tag.

Syntax

<footer class="...">
  <div class="container">
    <div class="row">
      <div class="col-*-*">
         ....
      </div>
    </div>
  </div>
</footer>

Example: Demonstration of the simple footer using Bootstrap 5.

We created a basic and Responsive footer. This footer page is developed by using Bootstrap 5 Classes for creating Row and Column break points in Grid System. Include the CDN links in the head section of the code for Bootstrap 5. One container is created with a row by using .row class from bootstrap. Four equal columns are created by using .col-md-3 column break point.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <title>Stylish Footer</title>
  
    <!-- Bootstrap CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
  
    <!-- Font Awesome -->
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" 
          rel="stylesheet">
  
    <!-- Bootstrap Bundle with Popper -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
  
    <!-- Custom CSS -->
    <style>
        body {
            color: white;
        }

        .footer {
            background-color: #198754;
        }

        .footer-content h2 {
            color: #fff;
        }

        .footer-content h5,
        .footer-content p,
        .footer-links a {
            color: #fff;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }

        .footer hr {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <footer class="footer p-5">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <h2>GeeksforGeeks</h2>
                </div>
                <div class="col-md-3">
                    <h5>About Us</h5>
                    <p>
                        GeeksforGeeks is a leading platform that provides
                        computer science resources and coding challenges for
                        programmers and technology enthusiasts along with
                        interview and exam preparations for upcoming aspirants.
                    </p>
                </div>
                <div class="col-md-3">
                    <h5>Contact Us</h5>
                    <ul class="list-unstyled">
                        <li>Email: [email protected]</li>
                        <li>Phone: +1233567890</li>
                        <li>Address: 123 Street, City, Country</li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>Follow Us</h5>
                    <ul class="list-inline footer-links">
                        <li class="list-inline-item">
                          <a href="#">
                                <i class="fab fa-facebook"></i>
                          </a>
                          </li>
                        <li class="list-inline-item">
                          <a href="#">
                                <i class="fab fa-twitter"></i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a href="#">
                                <i class="fab fa-instagram"></i>
                          </a>
                        </li>
                        <li class="list-inline-item">
                          <a href="#">
                                <i class="fab fa-linkedin"></i>
                          </a>
                        </li>
                    </ul>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-6">
                    <p>&copy; 2024 Your Website. All rights reserved.</p>
                </div>
                <div class="col-md-6 text-end">
                    <ul class="list-inline footer-links">
                        <li class="list-inline-item">
                            <a href="#" class="text-white">
                                Privacy Policy
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a href="#" class="text-white">
                                Terms of Service
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a href="#" class="text-white">
                                Sitemap
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>

Output:

Using Bootstrap's Built-In Classes

This is another approach for creating a simple footer page using Bootstrap 5. We can use only Bootstrap 5 classes only like background color, text colors, and other which are built-in classes. By using footer tag in HTML, we created a basic footer page.

Syntax

<footer class="bootstrap-classes">
     <div class="container">
           <span>....</span>
    </div>
</footer>

Example: Demonstration of the simple footer using Bootstrap 5. We used built-in classes for creating the basic footer page with using grid system.