Search within TutorialsPark

MDL : Footer


How to use MDL - Material Design Lite to Create Footer Layouts


Material Design Lite (MDL) : Footer

Material Design Lite(MDL) component footer is used to create a footer container to present related content in a visually attractive way.

A Footer is positioned at the bottom of the webpage, containing links and information about the important sections of the website and details about the website.

A MDL Footer can be made to appear either at the end of the page or any other position within the display.

MDL Provides two types of footers : mega-footer and mini-footer

mega-footer : A Mega Footer has multiple content sections containing a large no of links and other content seperated by a horizontal rule.

mini-footer : A Mini Footer has less complexity , since it contains only a single content sections.

Footers have a predefined structure comprising of both required and optional elements comprising of links and textual content.

MDL displays footers in a easy to access user interface with discrete blocks of content arranged in coherently related way.

Material Design Lite(MDL) Footer : Mega Footer

A MDL Mega Footer is using class mdl-mega-footer with the element footer.

The Middle Section of the Footer is defined using class mdl-mega-footer__middle-section

A MDL Footer in a minified form is created using class mdl-mini-footer on the footer element.

Example: Material Design Lite (MDL) Footer Mini Footer

Give it a TRY! » Note:The Meaning and Usage of All other CSS classes are in the table below


Material Design Lite(MDL) Footer : Mini Footer

A MDL Footer in a minified form is created using class mdl-mini-footer on the footer element.

Example: Material Design Lite (MDL) Footer Mini Footer

Give it a TRY! » Note:A MiniFooter retains all responsive features of MDL Layouts.


Material Design Lite : Footer Classes

MDL Class Description
mdl-mega-footer To Define a footer element as a Container of mega-footer
mdl-mega-footer__left-section To define a left section container of the footer
mdl-mega-footer__top-section To Define a top section container of the footer.
mdl-mega-footer__social-btn To create a styled square within a mega footer for social buttons.
mdl-mega-footer__right-section To Create a Footer Container for Right Section
mdl-mega-footer__middle-section To Define a Footer Container for Middle Section
mdl-mega-footer__link-list To Define an unordered list as a vertical(drop-down) list
mdl-mega-footer__bottom-section When used, the cell is stretched vertically filling the parent.
mdl-logo A Container for the Heading or Logo of the Website.
mdl-mini-footer Used to Define a container a for mini-footer.
mdl-mini-footer__left-section A Container to create the left section of the footer.
mdl-mini-footer__link-list To Create an Unordered list as a horizontal(inline) list.