Actividad entregable

2.5. Header y footer

Vamos a retocar el app.html e incluiremos el header y el footer, para ello vamos a borrar todo lo que habíamos puesto en el app.html y lo vamos a sustituir por este código que hay header y footer:

<!-- CABECERA -->
<header class="bg-dark text-white py-3 mb-4">
  <div class="container d-flex justify-content-between align-items-center">
    <h1 class="h3 m-0">Gestión de Productos</h1>

    <nav>
      <a href="#" class="text-white text-decoration-none me-3">Inicio</a>
      <a href="#" class="text-white text-decoration-none">Contacto</a>
    </nav>
  </div>
</header>

<!-- CONTENIDO PRINCIPAL -->
<main class="container mb-5">
  <p class="text-muted text-center">
    Proyecto iniciado
  </p>
</main>

<!-- FOOTER -->
<footer class="bg-light py-3 text-center border-top mt-5">
  <p class="m-0 text-muted">
    © 2025 · Actividad DWEC · Angular 18
  </p>
</footer>

Las etiquetas <header> y <footer> son HTML normal. Lo que aporta Bootstrap son las clases: bg-dark, container, d-flex, py-3, etc. Este header y footer serán la estructura fija de nuestra SPA.