How to create a Simple Footer using Bootstrap 5 ?

Last Updated : 16 Feb, 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/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/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: info@example.com</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>© 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.

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/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"> 
    </script> 
    
    <!-- Custom CSS -->
    <style> 
        footer { 
            color: #fff; 
            padding: 30px 0; 
        } 
  
        .footer-links a { 
            color: #fff; 
            text-decoration: none; 
            margin-right: 15px; 
            transition: color 0.3s ease; 
        } 
  
        .footer-links a:hover { 
            color: #adb5bd; 
        } 
    </style> 
</head> 
  
<body> 
    <footer class="footer bg-success"> 
        <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: info@example.com</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>© 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="#">Privacy Policy</a> 
                        </li> 
                        <li class="list-inline-item"> 
                            <a href="#">Terms of Service</a> 
                        </li> 
                        <li class="list-inline-item"> 
                            <a href="#">Sitemap</a> 
                        </li> 
                    </ul> 
                </div> 
            </div> 
        </div> 
    </footer> 
</body> 
  
</html>

Output:

Suggest improvement

How to Create Modal using Bootstrap 5 ?

Share your thoughts in the comments

How to create a Simple Footer using Bootstrap 5 ?

Using Bootstrap Grid System with CSS

Syntax

HTML

Using Bootstrap’s Built-In Classes

Syntax

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?