El footer

Resumen

Vamos a crear el footer de nuestro website. Recuerdas que puedes consultar toda la documentaciónde Bootstrap en getbootstrap.com . Encuentra más información aquí: https://getbootstrap.com/docs/4.1/components/card/#header-and-footer

Sergio Ivan Santacruz Madrigal

student•

Al crear un diseño en Bootstrap hay que tener presente, su lema de mobile-first sites, diseña desde móvil hacia dispositivos mas grandes

Juan C Felizzola

student•

Realmente es recomendable mobile-first sites en cualquier proyecto.

Isaí Ramírez

student•

Es una buena practica

Alejandra y Leonardo .

student•

Parece que ya no usan el gradient en el footer de Platzi, aquí se los comparto:

#footer{
    background: linear-gradient(90deg, #1c3643, #273b47 25%, #1e5472);
}

Karla

student•

background: linear-gradient(90deg, #1c3643, #273b47 25%, #1e5372);

Jimmy Buriticá Londoño

student•

Gracias.

José Rubial

student•

Cabe mencionar que los margin y los padding también se les puede especificar cuanto se les quieres agregar en función del tamaño de la pantalla, respetando también el mobile first, por ejemplo pb-4 es padding bottom indistinto al tamaño, pero pb-4 pb-md-2 quiere decir que desde las pantallas pequeñas tendrá un padding bottom de 4 y cuando entre al breakpoint de los medianos sera de 2.

Manuel Camacho

student•

Excelente, gracias por el dato

Harold David Avila Sabogal

student•

Muchas gracias por la información

Carolina Lopez

student•

Con el py-4 aplicarías el padding arriba y abajo a la vez :D

Nadir Kaled Yovera León

student•

gracias por el aporte!!

Alexander Valencia

student•

background: linear-gradient(90deg, #1c3643, #273b47 25%, #1e5372);

Joan Benavides Olivera

student•

Muchas gracias ;-)

José Daniel Navarrete Díaz

student•

Para que el contenido (texto) de las columnas se alineen al centro respecto a la vertical, incluir la siguiente clase en el row:

align-items-center

Deleted .

student•

Yo intenté con esa, pero no me resultó.. Me tocó con

text-align: center

Alexander Valencia

student•

bootstrap es mobile-first

Rodrigo Cuenca Mayuri

student•

Me di cuenta de eso con los retos de la clase anterior.

Jesus Gallardo

student•

Asi mismo como usamos pb y pt para agregar padding, se pueden usar las clases mb y mt para agregar margen

ruben catalan rivera

student•

Para los estudiantes que no puedan quitar los estilos de los enlaces en REACT, lo pueden hacer a travez de un className de 'text-reset text-decoration-none'

Izael Ruelas Garcia

student•

Si el padding es igual en el top y en el bottom se puede utilizar la clase py o px para el padding left y right. Funciona de la misma forma con los margenes

Harold David Avila Sabogal

student•

Muchas gracias por la información

Jheyson Eduardo Galvis Valencia

student•

Este es el código del background de Platzi: linear-gradient(90deg,#1c3643,#273b47 50%,#1e5372)

Oscar Rios

student•

Excelente clase. En lo personal yo pondría el Padding (pb-4 pt-4) en el CSS para dejar el código lo más limpio posible.

index.css
#footer {
    padding-bottom: 2px;
    padding-top: 2px;
}

Jose L. Figueroa

student•

Comparto mi ejercicio:

Index :

<footer id="footer" class="pb-4 pt-4">
      <div class="container">
        <div class="row text-center">
          <div class="col-12 col-lg">
            <a href="#">Preguntas Frencuentes</a>
          </div>
          <div class="col-12 col-lg">
            <a href="#">Contáctanos</a>
          </div>
          <div class="col-12 col-lg">
            <a href="#">Prensa</a>
          </div>
          <div class="col-12 col-lg">
            <a href="#">Terminos y Condiciones</a>
          </div>
          <div class="col-12 col-lg">
            <a href="#">Privacidad</a>
          </div>
          <div class="col-12 col-lg">
            <a href="#">Estudiantes</a>
          </div>
        </div>
      </div>
    </footer>

index.css :

#footer{
  background: linear-gradient(0deg,#1c3643,#273b47 25%,#1e5372);
}

#footer a{
  color: #FFFFFF;
}

David Salcedo

student•

¿Cuando el profesor pone en la clase “text-center” para centrar el texto, es una propiedad de bootstrap?

David Salcedo

student•

Muchas gracias!

Jose L. Figueroa

student•

Efectivamente como comenta @DaneSanchz es una clase de Bootstrap, si fuese un estilo tal cuál diría la palabra **style ** y se utilizaría el estilo text-align: center;

Enrique Garcia Stave

student•

Podemos centrar el texto de una fila con el comando:

` <div class="row text-center">

</div>`

Para añadir padding directamente a un elemento, podemos añadir dentro de las clases, la clase .pt-[numero] (para padding-top) y pb-[numero] (para padding-bottom).

Ivan Mendez

student•

buen consejo, pero es romendable agregale los estilos en el style.css, nunca en el html

Gonzalo Pimentel

student•

Que loco, estoy asombrado por las herramientas que te ofrece Bootstrap

Luis lagos

student•

Si, yo tambien me quede asombrado por la facilidad que te da a comparcion de hacer todo sin bootstrap

Antonio Mesa Casares

student•

Hola, al crear el proyecto a mi me salían los enlaces subrayados, he tenido que agregar a los estilos de los enlaces text-decoration: none; para que saliese igual que en el proyecto explicado. No sé por que a el le salen sin la decoración. ¿Hubo algún momento en que lo hizo?

Luis Ernesto Guevara Rodriguez

student•

Porque no vi tu comentario antes, me paso justo lo mismo por lo que tuve que googlearlo y también use ese método igual me funciono

Antonio Mesa Casares

student•

Gracias

Maximiliano Andres Villalobos Coilla

student•

Para agregar el padding top y bottom también se puede usar py-4 :D

Orlando Guerrero

student•

buenas tardes. a pesar de tener la siguiente intrucción

<div class="col"> <a href="#">Preguntas Frecuentes</a> </div> <div class="col-12 clo-lg"> <a href="#">Contactanos</a> </div> <div class="col-12 clo-lg"> <a href="#">Prensa</a> </div> <div class="col-12 clo-lg"> <a href="#">Terminos y Condiciones</a> </div> <div class="col-12 clo-lg"> <a href="#">Privacidad</a> </div> <div class="col-12 clo-lg"> <a href="#">Estudiantes</a> </div> al agrandar la ventana del navegador me siguen apareciendo en una sola columna. no se si sea porque mi monitor es de 25 pulgadas.

Joel Dominguez Merino

student•

Tengo el mismo detalle. Estas usando Bootstrap 5? o lo estas haciendo con la versión 4? Siento que puede ser eso :(

Yeldary Pirela

student•

tienes un typo estas colocando col-12 clo-lg y es col-12 col-lg

Daniel Omar Hernández Muñoz

student•

Saben por qué al poner el

            <div class="col-12 col-lg">
              <a href="#">Prensa</a>
            </div>

El col-lg no funciona?, no los acomoda separados por distancias iguales por defecto, alguien más sabe la razón? Para que me funcione tengo que separarlos manualmente poniendo

            <div class="col-12 col-lg-2">
              <a href="#">Prensa</a>
            </div>

Que por supuesto no quedan bien, y si lo quito el -2 o -1 que le ponga regresa a como lo acomoda col-12 aún con una pantalla grande

Daniel Omar Hernández Muñoz

student•

AHH!!, ya vi, es porque mi enlace estaba hacia bootstrap.css y era hacia bootstrap.min.css el que funciona normal como en la clase, parece que en la documentación oficial que copia el profesor lo cambiaron

Me refiero a este enlace, lo buscan en su archivo si tienen el mismo problema Creo que esto aplica también para bootstrap 5, creo... quizá luego confirmo en otro comentario

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

Pero si, entre .css y .min.css esta esa fuerte diferencia en el responsive design

Blanca Morillo Sierralta

student•

Hola Dann, esto es de hecho un bug de Bootstrap 5.0.2, la versión más reciente de Bootstrap por los momentos.

En efecto tendrías que utilizar otra versión, la ver. 5.0.1 funciona, te dejo las líneas de código por si quieres implementarlo con la quinta versión, pero otras diferencias ocurren más adelante en el curso.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link rel="stylesheet" href="index.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

Espero te haya ayudado, feliz día.

<footer id="footer" class="pb-4 pt-4">
      <div class="container">
        <div class="row text-center">
          <div class="col-12 col-lg">
            <a href="#">Preguntas Frencuentes</a>
          </div>
          <div class="col-12 col-lg">
            <a href="#">Contáctanos</a>
          </div>
          <div class="col-12 col-lg">
            <a href="#">Prensa</a>
          </div>
          <div class="col-12 col-lg">
            <a href="#">Terminos y Condiciones</a>
          </div>
          <div class="col-12 col-lg">
            <a href="#">Privacidad</a>
          </div>
          <div class="col-12 col-lg">
            <a href="#">Estudiantes</a>
          </div>
        </div>
      </div>
    </footer>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

El footer

Introducción al curso

Repositorio del curso de bootstrap

Bootstrap 4 ¿Qué trae de nuevo esta versión?

¿Que es un framework de frontend?

Nuestro Proyecto: Hola Mundo de Bootstrap

Creando el sitio web

La grilla de Bootstrap

Reto: La grilla de Bootstrap

El footer

El header de nuestro sitio

Creando un carousel de imágenes

Agregando texto informativo del evento

Agregando botones

Las cards de Bootstrap 4

Pastillas de texto

Agregando un contenedor de ancho completo

Los formularios de Bootstrap 4

Agregando un tooltip

Scrollspy: Conociendo la ubicación del usuario en el header

Agregando un modal para comprar tickets

Un nuevo formulario para completar la compra

Deploy a producción

Poniendo nuestro sitio en producción

Conclusiones del curso