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.
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.
<!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 =
rel = "stylesheet" >
<!-- Font Awesome -->
< link href =
rel = "stylesheet" >
<!-- Bootstrap Bundle with Popper -->
< script src =
</ 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.
<!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 =
rel = "stylesheet" >
<!-- Font Awesome -->
< link href =
rel = "stylesheet" >
<!-- Bootstrap Bundle with Popper -->
< script src =
</ 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: