Footer Template Html Css

Posted onby admin

Connect and share knowledge within a single location that is structured and easy to search. Responsive Footers built with Bootstrap 5. Free footer templates with different options like bottom fixed footer, sticky footer, social media, cards and more. 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.

Footer Template Html Css

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.

HTML and CSS Learn HTML Learn CSS. Web Templates Web Statistics Web Certificates Web Editor Web Development Test Your Typing Speed Play a Code Game. Artificial Intelligence Learn AI Learn Machine Learning Learn Data Science Learn NumPy Learn Pandas Learn SciPy. Learn how to create a fixed/sticky footer with CSS. A footer layout design with a fluid gooey/wavy motion created out of SVG elements. The animations are achieved by using only CSS properties and the structure is based primarily of SVG elements that are animated in different layers. Created by CodePen user Uwe Chardon. Also have a look at this Complete Library + Newest.

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

Html css header

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

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.

Template

The HTML code has custom class attribute values that connect to a PNG of the news outlet logos.

Footer Template Html Css

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

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

Footers are often underestimated by designers and developers. This area of a website is a great place to provide people with more information like contact details and social accounts, or with direct links to pages of interest. This is why we want to share with you a collection of 5 beautiful and responsive footers, which you can use as a building block for your next site.

The Design

Our templates are responsive and are easy to customize. We have split the CSS into separate files for each of the templates, so that it is extremely easy to include the footer that you need into an existing website - just copy and paste! The CSS is self contained, so you can be sure that no conflicts will arise with the rest of the page. Our footers also work great on smartphones and tablets.

Some of the footers use Font Awesome, so you have plenty of icons to choose from. And as a bonus they are crisp on any resolution, so are retina ready.

Free for Commercial Use

Feel free to use these templates in both personal and commercial projects. We hope they come in handy and we’d love to see what you do with them :)

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more