menu

Ionic Footer


Ionic Footer : Footers are placed at the bottom of the screen which contains different types of element. You can use color options same as header. Class bar-footer is used to create footer in ionic. You can add links and buttons in footer as per your need. We are going to explain the footer functionality with example and demo.


Ionic Footer

Add the following css to add footer in your App-

Ionic Footer

Try it »

If you run the above example it will produce the following output-

Ionic Footer Example

Ionic Footer Colors

Here are ionic color options available-

NoClassColor nameColor
1bar-lightWhite
2bar-stableLight Gray
3bar-positiveBlue
4bar-calmLight blue
5bar-balancedGreen
6bar-energizedYellow
7bar-assertiveRed
8bar-royalViolet
9bar-darkBlack

You can use the above colors in ionic footer.

Footer With Link

You can use icons, buttons and links in footer to perform actions.

Ionic footer Link Example

Try it »

If you run the above example it will produce the following output-

IOnic's Foooter Example

Footer With Icon

You can use icons in footer to perform actions.

Ionic Footer Icons

Try it »

If you run the above example it will produce the following output-

Ionic's Footer Example Demo