How to create Bootstrap footer?

There is no built-in component for creating the fixed/sticky or simple footer like forms, buttons, tooltips, popovers etc. However, by using a few CSS styles/properties you may create fixed or static footer easily.

You may include other components in the footer with a few line of codes.

In this article, I am going to show you a few footer templates based on Bootstrap 4 framework that you may use in your Bootstrap projects.

The example of fixed/sticky footer

You simply need to use the <footer> tag after all other content where you require to refer the .footer class shown below. It will create a sticky footer that remains fixed even vertical scroll bar appears. Have a look at the demo and code online:

Bootstrap 4 sticky footer

See online demo and code

The style for the footer:

In the CSS code, you can see the position is used as fixed. That makes the footer fixed as you scroll down the page.

Tweaking a little for centered text and linear background

This sticky footer is centered text and uses padding for lowering the text along with changing the background a bit. For that, a linear background is added along with other properties to stand out the fixed footer. Have a look:

Bootstrap footer

See online demo and code

Only this style is changed then the above example:

A large size static footer example

You may use this large footer menu in Bootstrap if the footer is supposed to contain many links. For example, for services like hosting, an e-commerce store or any other website, the footer may require presenting a good number of link or information that goes across the site. Have a look at the demo and code of CSS and HTML:

Bootstrap footer large

See online demo and code

Note: The demo may look cluttered in the example page. However, if you just copy/paste the code in your own editor and run in your system, it should work fine – as shown in above graphics.

The Style for this footer:

The markup of footer section only:

The upper markup is only for showing some content with the footer.

Large footer style number 2

The markup and most of the CSS is same for this footer template as in above example. I just changed the linear background colors for both footer classes along with button style, payment option icons size etc. Have a look:

Bootstrap footer style 2

See online demo and code

The CSS:

See the complete code on the demo page.