No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

15 Días
1 Hrs
59 Min
30 Seg

El footer

7/21
Recursos

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

Aportes 82

Preguntas 22

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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);
}

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

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

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

bootstrap es mobile-first

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

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’

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

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;
}

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).

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

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?

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

Bootstrap trae unos estilos predefinidos…parta personalizar algunos estilos creo mi hoja de estilos y le hago referencia en mi index.html debajo del link que me esta trayendo los estilos de bootstrap para que se de el efecto cascada y mis estilos pisen o sobre escriban sobre los de este framework

En vez de usar las clases pt-4 y pb-4 también podemos usar simplemente py-4 y nos sirve para ambos, top y bottom a la vez (py = padding eje Y, es decir vertical).
Lo mismo con pl y pr (padding left y padding right), podemos usar px y obtenemos el mismo resultado sin tener que escribir dos veces (px = padding eje X, es decir horizontal).

En lugar de pb pt se puede usar directamente py-4 que surte el mismo efecto, aplicando padding hacia arriba y hacia abajo al elemento.

Se puede usar Flex-Box en el DIV para la grilla “Row” de esta manera.

<div class="row text-center d-flex align-items-center"></div>

Así el texto se centrará verticalmente.

Como aporte en vez de usar pb-4 y pt-4, podemos escribir py-4

Y= es top+Bottom y X= Right+Left

div class="footer py-4" id="footer">

Les comparto el código de index.css

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

#footer a {
    color: white;
}

Bootstrap tiene mucho poder y es muy fácil de manejar

Puedes utilizar la clase bg-dark de Bootstrap para darle un color de fondo oscuro al footer.

Me estoy enamorando de Bootstrap xdd

Wow llevo mucho tiempo usando Bootstrap y nunca había escuchado hablar de pb y pt, Excelente Sacha!!!

Locoooooo! Esto está genial.

Increíble como funciona Bootstrap y todo la potencialidad que tiene!

No sabía toda la magia y el código que uno se puede ahorrar con bootstrap… 😄

Que genial!! No me lo esperaba lo del padding🤣

Buena Clase.!!!

<footer id="footer" class="bp-4 pt-4">
        <div class="conteiner">
            <div class="row text-center">
                <div class="col-12 col-lg">
                    <a href="#">Preguntas frecuentes</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>
        </div>
    </footer>```

Excelente Clase, gracias Profesor Sacha.

Me pregunto si no sería bueno, aunque fuera en otro proyecto, meter el footer dentro de un container.
Alguien lo practica en sus proyectos?

También podemos utilizar la class=“py-4” para agregar padding al top y bottom

Definitivamente tener mucho en cuenta el diseño responsivo.

Excepcional la clase muchas gracias profesor Sacha

Excelente muy buena la clase para seguir profundizando los conocimientos del desarrollo web…

Para lo que tienen problemas con el -ml,-mr, -pl y -pr es por la actualización 5.0.0 de bootstrap,
En este caso el reemplazo de -ml es -ms y el de -mr es -me, lo mismo con el padding.

Reto 2:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style type="text/css">
      .col {
        border:1px solid blue;
      }
    </style>
    <title>Practica bootstrap</title>
  </head>
  <body>

    <div class="container" style="background: red;">
      <!--1era Fila-->
      <div class="row">
        <div class="col-6 col-md col-lg">
         1
        </div>
        <div class="col-6 col-md col-lg">
         2
        </div>
        <div class="col-6 col-md col-lg">
          3
        </div>
        <div class="col-6 col-md col-lg">
          4
        </div>
      </div>

      <!--2nda Fila-->

      <!--tamaños pequeños: 
        -1era Fila: 2 columnas por fila
        -2nda fila: 1 columna por fila
       -->
      <!--tamaños medianos: 
        -1era Fila: 4 columnas por fila: equitativo
        -2nda fila: 2 columna por fila
       -->
      <!--tamaños grandess: 
        -1era Fila: equitativo
        -2nda fila: equitativo
       -->
      <div class="row">
        <div class="col-12 col-md-6 col-lg">
         1
        </div>
        <div class="col-12 col-md-6 col-lg">
         2
        </div>
        <div class="col-12 col-md-6 col-lg">
         3
        </div>
        <div class="col-12 col-md-6 col-lg">
         4
        </div>
        <div class="col-12 col-md-6 col-lg">
         5
        </div>
        <div class="col-12 col-md-6 col-lg">
         6
        </div>
        <div class="col-12 col-md-6 col-lg">
         7
        </div>
        <div class="col-12 col-md-6 col-lg">
         8
        </div>
        <div class="col-12 col-md-6 col-lg">
         9
        </div>
        <div class="col-12 col-md-6 col-lg">
         10
        </div>
      </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>```

muy buena clase y ejercicio

Despues del hacer el reto con esto me ha quedado aún más claro el uso de la clase container

Listo clase aprendida grabada y practicada

excelente explicacion sacha. 😃

ahora ya se que significaba pb y pt

Muy práctico utilizar “Bootstrap”.

Ahi en vez de utilizar el PB y el PT se puede poner PY que hace referencia al eje Y y si se quiere hacer con los laterales se pone PX

Siento que estoy aprendiendo un nuevo super poder. 🤯

Que divertido es jugar con Bootstrap lo único que se me ocurre que puede ser una desventaja o por lo menos para mi, es que en algún momento:

  1. En un diseño mas grande uno se “pisara” con los estilos y tendrá que usar !important lo cual no es una buena practica.
  2. Toca tener buena memoria, lo cual será visitando el sitio de Bootstrap para aplicar los estilos correctos o practicando para afianzarlo como con el css puro.

Vamos a seguir, se ve prometedor.

Muy bueno no me acordaba de utilizar el padding así…

Es necesario ponerle la id footer?

Para alinear el contenido de nuestro row en el centro, de forma vertical, puedes agregar la clase align-items-center.

Ahora veo de donde saco su grilla el framework de Materialize 😛

Muy buena…

Increíble curso :3

Realmente estoy aprendiendo mucho con usted profesor Sacha
aprendo cosas que tienen que ver con el curso y cosas que no
Muy buen profesor, inspira a seguir aprendiendo

Clase magistral !!!-

Genial !!!

para empezar el proyecto metan esta linea de código con git.
primero tienen que estar en la carpeta del proyecto, luego introduzcan esto:

git checkout 846ede9445b14e3f01bf252651666c1d415de400

ese codigo los llevara al principio del projecto

Pues yo me atasqué en el reto 3

Genial, gran clase, genial los aportes de los compañeros

Excelente ❤️

Hasta el momento Boostrap me ha parecido el framework más sencillito de CSS

Todo muy fácil hasta ahora

un consejo para utilizar los brack poind al momento de ajustar las medida de nuestras columnas con boostrap es pensar en un modelo Mobile First
es decir, configurar como se vería en dispositivos pequeños y luego pasar a pantallas mas grandes

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <style>
        .reto1 .col {
            background-color: blue;
            border: 1px solid black;
            height: 50px;
        }
        .reto2 .col {
            background-color: yellow;
            border: 1px solid black;
            height: 50px;
        }

        .reto3 .col {
            background-color: orangered;
            border: 1px solid black;
            height: 70px;
        }

    </style>
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container reto1" style="background-color: red; ">
        <div class="row">
            <div class="col" >
            1
            </div>
            <div class="col" >
            2
            </div>
            <div class="col" >
            3
            </div>
        </div>
        <div class="row">
            <div class="col" >
            1
            </div>
            <div class="col" >
            2
            </div>
            <div class="col" >
            3
            </div>
            <div class="col" >
            4
            </div>
            <div class="col" >
            5
            </div>
            <div class="col" >
            6
            </div>
            <div class="col" >
            7
            </div>
            <div class="col" >
            8
            </div>
            <div class="col" >
            9
            </div>
            <div class="col" >
            10
            </div>
        </div>
        <div class="row">
            <div class="col" >
            1
            </div>
            <div class="col" >
            2
            </div>
        </div>
        <div class="row">
            <div class="col" >
            1
            </div>
            <div class="col" >
            2
            </div>
            <div class="col" >
            3
            </div>
            <div class="col" >
            4
            </div>
            <div class="col" >
            5
            </div>
        </div>
        <div class="row">
            <div class="col" >
            1
            </div>
        </div>

    </div>

    <br>

    <div class="container reto2">
        <div class="row">
            <div class="col col-6 col-md">
                Fila 1/Col 1
            </div>
            <div class="col col-6 col-md">
                Fila 1/Col 2
            </div>
            <div class="col col-6 col-md">
                Fila 1/Col 3
            </div>
            <div class="col col-6 col-md">
                Fila 1/Col 4
            </div>
        </div>
        <div class="row">
            <div class="col col-12 col-md-6 col-lg">
                Fila 2/Col 1
            </div>
            <div class="col col-12 col-md-6 col-lg">
                Fila 2/Col 2
            </div>
            <div class="col col-12 col-md-6 col-lg">
                Fila 2/Col 3
            </div>
            <div class="col col-12 col-md-6 col-lg">
                Fila 2/Col 4
            </div>
            <div class="col col-12 col-md-6 col-lg">
                Fila 2/Col 5
            </div>
            <div class="col col-12 col-md-6 col-lg">
                Fila 2/Col 6
            </div>
            <div class="col col-12 col-md-6 col-lg">
                Fila 2/Col 7
            </div>
            <div class="col col-12 col-md-6 col-lg">
                Fila 2/Col 8
            </div>
            <div class="col col-12 col-md-6 col-lg">
                Fila 2/Col 9
            </div>
            <div class="col col-12 col-md-6 col-lg">
                Fila 2/Col 10
            </div>
        </div>
    </div>

    <br>

    <div class="container reto3">
        <div class="row " >
            <div class="col col-12 col-md-6 offset-md-6">
                Fila 1/Col 1
            </div>
        </div>
        <div class="row">
            <div class="col col-8 col-md-8 offset-md-2">
                Fila 2/Col 2
            </div>
        </div>
        <div class="row justify-content-start">
            <div class="col col-3 offset-9 offset-md-0">
                Fila 3/Col 3
            </div>
        </div>
    </div>
    

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

por cuestiones de orden, lo ideal sería el css crearlo dentro de una carpeta y nombrarlo como style.css

molesta que saltes a otras pantallas tan rápido con tab y los accesos directos del teclado

#footer {
background: linear-gradient(90deg,#001c30,#001c50 25%,#001c80);
}

El color de fondo actual del footer es #03091E

WOOOO debo admitir que la calidad de platzi en sus cursos anteriores era infinitamente mejor, se extraña el platzi 2019, 2018, 2020

Gracias

Good!

estupendo, gracias sacha

f

Me encanta Bootstrap, de verdad que si, claro yo vengo de css puro y procesadores. Mucho mas fácil.

exelente

que bien!

si esta mas rapido crear todo con bootstrap, es cuestion de acostumbrarse.

<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 Frecuentes</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="#">Conferencias</a>
          </div>
          <div class="col-12 col-lg">
            <a href="#">Términos 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>```

HTML

   <footer id="footer" class="pb-4 pt-4"> <!-- padding bottom padding top -->
        <div class="container">
            <div class="row text-center">
                <div class="col-12 col-lg">
                    <a href="#">Preguntas Frecuentes</a>
                </div>
                <div class="col-12 col-lg">
                    <a href="#">Contactanos</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>
        </div>

    </footer>

CSS

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

#footer a {
    color: white;
    text-decoration: none;
}

#footer a:hover {
    text-decoration: underline;
}

link:css abreviatura emmet

Creo que acabo de encontrar el amor 😆
Bootstrap está muy genial 👏

Este es mi codigo para los desafios

<code> 
 <body>
    <h2>Desafio 1</h2>
     <div class="container-uno" >
            <div class="row" >
              <div class="col"> 1 </div>
              <div class="col"> 2 </div>
              <div class="col"> 3 </div>
            </div>
            <div class="row">
                <div class="col"> 1 </div>
                <div class="col"> 2 </div>
                <div class="col"> 3 </div>
                <div class="col"> 4 </div>
                <div class="col"> 5 </div>
                <div class="col"> 6 </div>
                <div class="col"> 7 </div>
                <div class="col"> 8 </div>
                <div class="col"> 9 </div>
                <div class="col"> 10 </div>
            </div>
            <div class="row">
                <div class="col"> 1 </div>
                <div class="col"> 2 </div>
            </div>
            <div class="row">
                <div class="col"> 1 </div>
                <div class="col"> 2 </div>
                <div class="col"> 3 </div>
                <div class="col"> 4 </div>
                <div class="col"> 5 </div>
            </div>
            <div class="row">
                <div class="col"> 1 </div>
            </div>
      </div>


      <h2>Desafio 2</h2>

      <div class="container-dos">
        <div class="row">
          <div class="col-6 col-md"></div>
          <div class="col-6 col-md"></div>
          <div class="col-6 col-md"></div>
          <div class="col-6 col-md"></div>
        </div>
        <div class="row">
          <div class="col-12 col-sm-6 col-md"></div>
          <div class="col-12 col-sm-6 col-md"></div>
          <div class="col-12 col-sm-6 col-md"></div>
          <div class="col-12 col-sm-6 col-md"></div>
          <div class="col-12 col-sm-6 col-md"></div>
          <div class="col-12 col-sm-6 col-md"></div>
          <div class="col-12 col-sm-6 col-md"></div>
          <div class="col-12 col-sm-6 col-md"></div>
          <div class="col-12 col-sm-6 col-md"></div>
          <div class="col-12 col-sm-6 col-md"></div>
        </div>
      </div>
      

      <h2>Desafio 3</h2>


      <div class="container-tres">
          <div class="row">
            <div class="col1  offset-md-8">1</div> 
          </div>
          <div class="row">
            <div class="col1-4 col-md-8 offset-md-2">1</div> 
          </div>
          <div class="row">
            <div class="col1 col-md-4 offset-8 offset-md-0">1</div> 
          </div>

      </div>