Navigation

Footer

The footer serves as a space where you can include various elements such as a logo, copyright notice, and links to other pages.

Basic example

Default

Use the component class `footer` for footer component.

Position

Static footer

Use the component class `footer` for footer component. Below given example displays static footer with links.

Sticky footer

Please refer to the following example for a sticky footer that remains visible even when scrolling.

Illustrations

With logo section

Please refer to the following example for a footer with logo section. Use component class `footer-title` for footer column headings.

With form

Please refer to the following example for a footer with form.

With Logo & Social Links

Please refer to the following example for a footer with logo & social links.

With copyright text

Please refer to the following example for a footer with copyright text.

With copyright text & social links

Please refer to the following example for a footer with copyright text & social links.

With two rows

Please refer to the following example for a footer with two rows.

Centered footer with logo & social icons

Please refer to the example below for a centered footer with a logo and social icons. Utilize the modifier class `footer-center` to align the footer content in the center.

Centered footer with social icons

Please refer to the example below for a centered footer with social icons.

Dual footer (with partition)

Please refer to the example below for a footer dual footer with partition.

With dropdown

Please refer to the example below for a footer with dropdown.

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`footer`	component	Base class for footer component.
`footer-title`	part	Base class for title of a footer column.
`footer-center`	modifier	Aligns footer content to center.