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

Sign up for Font Awesome

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

Font AwesomeIcons

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.

Image of the codepen footer made in bootstrap

CodePen

See the Pen <a href="https://codepen.io/aviforever/pen/VjGGgp">footer made in bootstrap </a> by Aviforever (<a href="https://codepen.io/aviforever">@aviforever</a>) on <a href="https://codepen.io">CodePen</a>.

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.

Bootstrap footer design

CodePen

See the Pen <a href="https://codepen.io/anu-uxe/pen/drJERE">Bootstrap Footer Design</a> by anu.uxe (<a href="https://codepen.io/anu-uxe">@anu-uxe</a>) on <a href="https://codepen.io">CodePen</a>.

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.

Bootstrap footer example

CodePen

See the Pen <a href="https://codepen.io/shamim539/pen/ZBQzYw">bootstrap footer example</a> by shamim khan (<a href="https://codepen.io/shamim539">@shamim539</a>) on <a href="https://codepen.io">CodePen</a>.

Bootstrap footer

By Sebastian Sabadus

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.

Bootstrap footer

CodePen

See the Pen <a href="https://codepen.io/Mutulica/pen/rqwLwX">bootstrap footer</a> by Sebastian Sabadus (<a href="https://codepen.io/Mutulica">@Mutulica</a>) on <a href="https://codepen.io">CodePen</a>.

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.

Bootstrap footer

CodePen

See the Pen <a href="https://codepen.io/Alioos_90/pen/VPbzpy">Bootstrap footer</a> by Ali (<a href="https://codepen.io/Alioos_90">@Alioos_90</a>) on <a href="https://codepen.io">CodePen</a>.

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.

Bootstrap footer

CodePen

See the Pen <a href="https://codepen.io/letmeknowit/pen/OvMJZw">OvMJZw</a> by letmeknowit (<a href="https://codepen.io/letmeknowit">@letmeknowit</a>) on <a href="https://codepen.io">CodePen</a>.

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.

Bootstrap footer design 3

CodePen

See the Pen <a href="https://codepen.io/Sherif-7amdy/pen/jOPgaGP">Bootstrap Footer Design 3</a> by Sherif Hamdy (<a href="https://codepen.io/Sherif-7amdy">@Sherif-7amdy</a>) on <a href="https://codepen.io">CodePen</a>.

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.

Responsive Bootstrap Footer

CodePen

See the Pen <a href="https://codepen.io/idesignsmf/pen/WgjXeo">Responsive Bootstrap Footer</a> by idesignSMF (<a href="https://codepen.io/idesignsmf">@idesignsmf</a>) on <a href="https://codepen.io">CodePen</a>.

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.

Bootstrap Footer AV Test

CodePen

See the Pen <a href="https://codepen.io/Tony_Codes/pen/pVJqqY">Bootstrap Footer AV Test</a> by TonyS (<a href="https://codepen.io/Tony_Codes">@Tony_Codes</a>) on <a href="https://codepen.io">CodePen</a>.

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.

Bootstrap footer

CodePen

See the Pen <a href="https://codepen.io/magnusriga/pen/bKbWjx">Bootstrap Footer</a> by Magnus (<a href="https://codepen.io/magnusriga">@magnusriga</a>) on <a href="https://codepen.io">CodePen</a>.

Bootstrap Footer Example 1

By Manasseh El Bey

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.

Bootstrap footer example 1

CodePen

See the Pen <a href="https://codepen.io/manassehl/pen/xNGvwj">Bootstrap Footer Example 1</a> by Manasseh El Bey (<a href="https://codepen.io/manassehl">@manassehl</a>) on <a href="https://codepen.io">CodePen</a>.

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.

Simple Responsive Bootstrap footer

CodePen

See the Pen <a href="https://codepen.io/hanabach/pen/xBvJqX">Simple Responsive Bootstrap footer.</a> by snakebite (<a href="https://codepen.io/hanabach">@hanabach</a>) on <a href="https://codepen.io">CodePen</a>.

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.

Bootstrap footer

CodePen

See the Pen <a href="https://codepen.io/amerz90/pen/qapLOW">Bootstrap Footer</a> by Arthur (<a href="https://codepen.io/amerz90">@amerz90</a>) on <a href="https://codepen.io">CodePen</a>.

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.

Responsive footer bootstrap 4

CodePen

See the Pen <a href="https://codepen.io/axelaredz/pen/LdJjMJ">responsive footer bootstrap 4</a> by Axelaredz (<a href="https://codepen.io/axelaredz">@axelaredz</a>) on <a href="https://codepen.io">CodePen</a>.

Bootstrap footer

By WebDeveloperCodeRep

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.

Responsive footer bootstrap

CodePen

See the Pen <a href="https://codepen.io/AndreeaBunget/pen/MWYaoyx">Responsive Footer Bootstrap</a> by WebDeveloperCodeRep (<a href="https://codepen.io/AndreeaBunget">@AndreeaBunget</a>) on <a href="https://codepen.io">CodePen</a>.

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.

Bootstrap 4 footer

CodePen

See the Pen <a href="https://codepen.io/gcjosh/pen/oxpwyL">Bootstrap 4 Footer and Sub Navigation</a> by gcjosh (<a href="https://codepen.io/gcjosh">@gcjosh</a>) on <a href="https://codepen.io">CodePen</a>.

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.

Bootstrap 4 footer

CodePen

See the Pen <a href="https://codepen.io/jettaz/pen/OJJoaaX">Bootstrap 4 footer / collapsible / responsive </a> by Jettaz (<a href="https://codepen.io/jettaz">@jettaz</a>) on <a href="https://codepen.io">CodePen</a>.

Bootstrap 4 Footer

By Anoopkumarseth

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.

Bootstrap footer

CodePen

See the Pen <a href="https://codepen.io/anoopkumarseth/pen/wvvrrwj">Bootstrap 4 Footer</a> by Anoopkumarseth (<a href="https://codepen.io/anoopkumarseth">@anoopkumarseth</a>) on <a href="https://codepen.io">CodePen</a>.