PS PageSection Sign In

Footers Using Bootstrap CSS — Bootstrap HTML Templates

A template from PageSection Templates
Updated 06 September 2022 • Published 19 March 2022

Footers usually appear at the bottom of webpages and are commonly used to provide links to other resources, services or contact information provided by the site owners. For branding purposes, they tend to have a consistent design across all pages on the same website. And for legal purposes, they tend to have copyright information, and a few links to the website terms and other legal documentation like privacy policies.

Editable HTML templates at

But for this blog post, let us showcase a specific footer template we created using two different versions of the Bootstrap framework. Please note that the two versions of Bootstrap, however similar, have some important differences as stated by the official migration tutorial here.

Footer template using Bootstrap 4

Here is the simple footer template created using Bootstrap version 4. For more examples, you can check out the Bootstrap 4 category of editable snippets and templates. To make a footer, simply create a parent <footer></footer> element and add a 'row' with inner 'columns' to hold the footer content. To add a row and inner columns, simply use the row and col classes respectively. Please note that the card <div> columns must be inside another <div> with a row class applied.

Footer template using Bootstrap 3

Here is the same footer template design created using Bootstrap version 3. This is very similar to the Bootstrap 4 version, and uses a lot of similar class names. Take note that we do NOT use col (but instead use variations like col-sm-6) in this Bootstrap 3 version. For other similar examples, visit the Bootstrap 3 category of editable snippets and templates.

Using PageSection

At PageSection, we provide (among many things) a collection of editable HTML templates & snippets across popular CSS frameworks. Editable HTML templates help users save time when creating HTML markup/content. No need to download the template before editing, simply use the HTML Editor to edit and customize directly in your web browser. Then save or download the final results.

As always, if you want to edit online (within your web browser), simply check out the blog post/tutorial we created to guide users on how to use the HTML Editor.

Upload & edit custom HTML templates

Users can also use and edit custom HTML templates. Simply register & create a free account with PageSection, then upload and create custom editable templates for any of HTML website, blog or business. Just make sure to include an index.html page in the custom HTML template(s) you upload, otherwise feel free to follow the tutorial below.

Get HTML Project

Get HTML project files

This could be a website for a client, or for personal use. Get the necessary project files of the website to upload

Create Zip File

Place the files into a single zip file

Put the website (project) files in a single zipped (.zip) file, include an index.html at the "top" and not within another folder

Upload Zip File

Upload the zip file using your PageSection user account

Upload the zip file using our service to create a project and receive a link. Later you can edit or delete the project

Receive Web Link

Receive a web URL link for every uploaded project

After any successful project upload, you will receive a web URL link which can be used to visit or share the website

Please Note: Back-end (server-side) logic & script files are not supported and should not be uploaded. Only upload the necessary front-end web files like the HTML, CSS and JavaScript. In addition, JavaScript-heavy frameworks are also not well supported as they tend to rely on server-side logic. Ensure your uploaded HTML projects contain as much valid HTML as possible.

Contact us via if you got any questions. Also do not forget to share this post if you found this information useful. Until next time, cheers.

For more related content

Visit our blog page