Curso Diseño Web Responsive con Bootstrap
"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">© 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>
Este código HTML crea un pie de página sencillo y elegante utilizando Bootstrap 4.5. A continuación, te detallo cada parte:
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.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.©
: Representa el símbolo de copyright.Scripts de JavaScript:
<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.<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.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 fuente del proyecto adquiriendo el curso completo
Comprar© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2024