Footer Template

admin

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.

Define the content by creating a template that specifies how the footer section is rendered. To specify a template, first place opening and closing tags between the opening and closing tags of the element. Next, add the custom content between the opening and closing tags. The content can be as simple as plain text or more complex (embedding other controls in the template, for example). Footer Elementor Templates. Explore 50+ free Elementor footer templates that are responsive mobile-ready Elementor templates. All of these templates are completely 100% free downloads to make any websites. You can use our templates for your personal, business and as well as, commercial sites. Footer is the crucial component of the Website. Responsive Footers built with Bootstrap 5. Free footer templates with different options like bottom fixed footer, sticky footer, social media, cards and more. Full Screen Header Template. Click any text to edit or style it. Select text to insert a link. Click blue 'Gear' icon in the top right corner to hide/show buttons, text, title and change the block background. Click red '+' in the bottom right corner to add a new block. Use the top left menu to create new pages, sites and add themes.

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

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

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></i>.

Add a Font Awesome icon to your HTML template

footer.html

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

Footer

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

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.

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

Bootstrap footer template

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

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.

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

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.

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

Footer Template

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

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.

CodePen