Inicio » Cursos » Diseño Web Responsive con Bootstrap

Curso Diseño Web Responsive con Bootstrap

Capitulo 5 ➜ Pie de página web

"Cómo Crear un Pie de Página Simple con Bootstrap 4.5: Diseño Responsivo y Minimalista"

Descubre cómo diseñar un pie de página sencillo y elegante utilizando Bootstrap 4.5. Aprende a aplicar estilos y estructura para un footer profesional con información de derechos reservados.

¿Cómo implementar el pie de página o footer en una página web?

<div class="container-fluid bg-light text-center p-3">
    <p class="small">&copy; Todos los derechos reservados :: Empresa SAC :: Perú 2020</p>
</div> 

    <script src="js/jquery-3.5.1.slim.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

 

Descripción del Código:

Este código HTML crea un pie de página sencillo y elegante utilizando Bootstrap 4.5. A continuación, te detallo cada parte:

  1. Contenedor de Pie de Página (<div class="container-fluid bg-light text-center p-3">):

    • container-fluid: Este contenedor ocupa el 100% del ancho de la pantalla, asegurando que el pie de página se extienda completamente, independientemente del tamaño de la ventana.
    • bg-light: Aplica un fondo de color claro al pie de página, lo que ayuda a distinguirlo del resto del contenido.
    • text-center: Centra horizontalmente todo el texto contenido en este div.
    • p-3: Añade un padding de 3 unidades alrededor del contenido para proporcionar un espacio adecuado entre el texto y los bordes del pie de página.
  2. Texto del Pie de Página (<p class="small">):

    • small: Aplica un tamaño de fuente más pequeño al texto, típico para la información de derechos reservados que suele estar en un tamaño discreto.
    • Contenido del Texto:
      • &copy;: Representa el símbolo de copyright.
      • "Todos los derechos reservados :: Empresa SAC :: Perú 2020": Este texto indica que todos los derechos del sitio web están reservados, menciona el nombre de la empresa, su localización (Perú), y el año (2020).
  3. Scripts de JavaScript:

    • jQuery (<script src="js/jquery-3.5.1.slim.min.js"></script>): Añade la librería jQuery en su versión "slim", que es más ligera y omite algunos módulos que no se usan comúnmente.
    • Bootstrap (<script src="js/bootstrap.min.js"></script>): Añade el archivo JavaScript de Bootstrap para proporcionar funcionalidades dinámicas como el carrusel, los modales, y otras interacciones en la página.

Función del Pie de Página:

Este pie de página proporciona información legal esencial y el año de derechos reservados, con un diseño simple pero efectivo. Es un componente clave para cerrar la estructura de la página web, brindando un aspecto profesional y cuidando los detalles legales.


2198 visitas

« Capítulo 4 – Productos en la portada

Capítulo 6 – Sección Vestidos »

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

Más cursos que pueden interesarte

Más cursos

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2024