> For the complete documentation index, see [llms.txt](https://ajgallego.gitbook.io/ionic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajgallego.gitbook.io/ionic/componentes/componentes_footers.md).

# Pies de página

Los pies de página nos permiten añadir una barra fija en la parte inferior de la pantalla (similar a las cabeceras) que pueden contener distintos tipos de contenidos. Para añadirlas tenemos que utilizar la directiva `<ion-footer-bar>` de la forma:

```markup
<ion-footer-bar class="bar-balanced">
  <h1 class="title">Footer</h1>
</ion-footer-bar>
```

Con lo que obtendríamos un resultado similar al siguiente:

![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBW2kae7cm0bqu2-b%2Ffooter_example.png?generation=1577179056695018\&alt=media)

Como se puede ver en el código para indicar el título del pie de página también tenemos que añadir una etiqueta `<h1>` con la clase "`title`". Además podemos usar las clases CSS de color que vimos para las cabeceras, estas eran:

| Color         | Ejemplo                                                                                                                                                                                                                    |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| bar-light     | ![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBW2mce79VIwTiVYX%2Fheader-bar-light.png?generation=1577179056612319\&alt=media)     |
| bar-stable    | ![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBW2oUB_K6JLtyFjI%2Fheader-bar-stable.png?generation=1577179057394988\&alt=media)    |
| bar-positive  | ![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBW2qCHxEBRAoepM0%2Fheader-bar-positive.png?generation=1577179057399384\&alt=media)  |
| bar-calm      | ![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBW2s3V1npRHLJfXd%2Fheader-bar-calm.png?generation=1577179056885019\&alt=media)      |
| bar-balanced  | ![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBW2uHO6VbO3n7irp%2Fheader-bar-balanced.png?generation=1577179056504218\&alt=media)  |
| bar-energized | ![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBW2wPuId6Nl6Hg7Z%2Fheader-bar-energized.png?generation=1577179057096788\&alt=media) |
| bar-assertive | ![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBW2yqSEd_UZD8Bny%2Fheader-bar-assertive.png?generation=1577179056925600\&alt=media) |
| bar-royal     | ![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBW3-NwgV-V_KUcwG%2Fheader-bar-royal.png?generation=1577179056999290\&alt=media)     |
| bar-dark      | ![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBW313q1RXwo1CD_A%2Fheader-bar-dark.png?generation=1577179057213307\&alt=media)      |

Por lo que al añadir en el código de ejemplo anterior la clase CSS "`bar-balanced`" daría como resultado un pie de página en color verde.

## Ejemplo

A continuación se muestra un ejemplo de como podríamos crear una aplicación con una cabecera, un pie de página y un texto dentro del área de contenido:

```markup
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, 
            user-scalable=no, width=device-width">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-positive">
          <h1 class="title">Cabecera</h1>
      </ion-header-bar>
      <ion-content class="padding">
          <h1>Mi primera aplicación</h1>
          <p>Texto de ejemplo.</p>
      </ion-content>
      <ion-footer-bar class="bar-balanced">
          <h1 class="title">Pie de página</h1>
      </ion-footer-bar>
    </ion-pane>
  </body>
</html>
```

> Como se puede ver tanto el pie de página como la cabecera las tenemos que colocar fuera de las etiquetas `<ion-content>` pero dentro de la sección `<ion-pane>`.

Con este código obtendríamos un resultado similar al siguiente:

![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBW33UHiSv12pXkCl%2Fcontent_example2.png?generation=1577179057529216\&alt=media)