Oct 01, 2020
Bootstrap ยท8 min read
The official Bootstrap documentation does not provide examples for footers, so we decided to provide 18 Bootstrap footer examples built using the containers, rows, and columns provided by the Bootstrap Web Framework.
All of these responsive footers contain Bootstrap custom class attributes and were posted on CodePen.
Links to individual user-profiles and CodePens are provided for each Bootstrap footer example below.
Add the Bootstrap4.5 CDN
Bootstrap 4.5.2 starter template using Bootstrap CSS and JS CDNs
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Bootstrap Footer Examples 2020</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
Before you copy and paste any of the code below, make sure to add the Bootstrap link and scripts to your HTML template.
The Bootstrap JavaScript and JQuery scripts are optional and are not used in all of the Bootstrap footer examples linked below.
The CDN above is for the latest version of Bootstrap available at the time of this publication.
If you prefer to download Bootstrap rather than use the CDNs, click here.
Use Font Awesome Icons
Another thing to note is many of these footers contain social media links attached to icons.
Many of these footer examples use Font Awesome, an open-source project with over 1,000 vector icons and social media logos.
Sign up for a free Font Awesome account
Create a kit
Create a kit to get started.
Add the Font Awesome CDN to your project
Copy and paste your custom Kit Code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
...
<!-- Font Awesome JS -->
<script src="https://kit.fontawesome.com/0000000000.js" crossorigin="anonymous"></script>
<title>Bootstrap Footer Examples 2020</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
...
</body>
</html>
Then copy and paste your custom Font Awesome script into the header of your project. This script can be found on the "Kits" tab under the user side navigation bar.
Search for a Font Awesome icon
Facebook Font Awesome icon
Now, you can search the Font Awesome catalog of icons and click on one.
Copy the Font Awesome HTML code
Copy the HTML code of the icon, in this case <i class="fab fa-facebook-f"></i>
.
Add a Font Awesome icon to your HTML template
footer.html
<footer>
<p><i class="fab fa-facebook-f"></i>Facebook</p>
</footer>
Then paste the HTML code of the icon in your HTML template.
Footer made in Bootstrap
By Aviforever
Updated in 2020, this Bootstrap footer features four responsive, Bootstrap columns. Company information, quick links, registration, and contact information are all provided, making it easy to update your site's information.
You can also choose to add a link to a registration form in the footer along with your company email address.
CodePen
Bootstrap Footer Design
By anu.uxe
This footer is written in HTML and SCSS. Bootstrap containers, rows, and columns are used to create a simple three-column layout that responsively turns to one column in smaller viewpoints.
CodePen
Bootstrap footer example
By Shamim Khan
The footer linked below is a four-column Bootstrap footer with "Stay in Touch", "Latest Events", and "Opening Hour" headers. It is designed to add images and business hours along with two separate email addresses.
Font awesome icons are used in the HTML code.
CodePen
Bootstrap footer
Social media links, solutions, developers, and company links are all added to this Bootstrap-based footer. The Privacy & terms plus a sitemap link are also included in this code.
Be sure to change all of the links to your website and social media URLs.
CodePen
Bootstrap footer
By Ali
This is a darker footer designed to showcase a business's design and coding work. It also features six rounded images that can be used to link social media accounts or employee profile pages.
Replace the <img src="http://placehold.it/48x48" alt="" />
with your own image sources.
CodePen
Bootstrap-3 footer
By letmeknowit
This CodePen user offers a responsive Bootstrap footer that links to commonly used social media platforms. Then four columns below the social media links contain additional internal links.
All of the href attributes are blank so you can add in your own links. Font Awesome icons are used for social media links.
CodePen
Bootstrap Footer Design 3
By Sherif Hamdy
The Bootstrap footer linked below specifically caught our attention given the subscribe form included on the right side of the footer.
The Font Awesome CDN is used for social media links, a basic HTML form element, and input fields that create the subscribe form.
CodePen
Responsive Bootstrap Footer
By idesignSMF
This is a simple Bootstrap footer in comparison to the previous Bootstrap footers above given it only has services, about, and company description with a few social media links.
In smaller viewpoints, the three columns turn into only two rows.
CodePen
Bootstrap Footer AV Test
By TonyS
This responsive Bootstrap footer has a featured in the section for media coverage, a subscribe now section, and an awards section.
The HTML code has custom class attribute values that connect to a PNG of the news outlet logos.
CodePen
Bootstrap Footer
By Magnus
This is another Bootstrap footer example with products, company, and contact columns. At the bottom of the footer, there are social media, Privacy Policy, and Terms of Use links.
There is a custom yellow color seen on the link hover.
CodePen
Bootstrap Footer Example 1
With a simple five column design, this Bootstrap footer example works well if you need a quick footer. There is no CSS or social media links.
This code is only in HTML.
CodePen
Simple Responsive Bootstrap footer
By snakebite
With four responsive columns, this Bootstrap footer has empty links for whatever you need to include in your footer.
In mobile, a "Top" button appears to push users back to the top of the page.
CodePen
Bootstrap Footer
By Arthur
This is a more unique footer that looks like the bottom of a polaroid photo. The HTML code is simple and contains Bootstrap containers, rows, and columns.
CodePen
Responsive Footer Bootstrap 4
By Axelaredz
This is a four-column footer with a separate copyright footer. Replace http://placehold.it/250x80
with your business logo, change out the contact information, and update the links.
CodePen
Bootstrap footer
This Bootstrap footer has an image behind the links and contact information. The CSS file is featured given that the HTML only places the footer in columns.
CodePen
Bootstrap 4 Footer and Sub Navigation
By gcjosh
This Bootstrap footer example comes with a sub-navigation that can be linked to different contact pages.
The footer is designed for a city's website but can easily be changed to fit your website.
CodePen
Bootstrap 4 footer/collapsible/responsive
By Jettaz
This footer uses Font Awesome icons. It also has a responsive dropdown menu when in mobile viewpoints.
The code uses containers, rows, and columns along with data-toggle attributes.
CodePen
Bootstrap 4 Footer
Similar to a previously linked Bootstrap footer example, this example contains a form for a newsletter subscription along with quick links and social media links.
Font Awesome icons are used along with Bootstrap 4 responsive columns.
CodePen
Follow us@ordinarycoders