El footer

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

Hola a todos, soy un viejo alumno del curso y decidí crear el proyecto detalle a detalle como se presento y desarrollo a lo largo del curso más pequeñas correcciones y ciertas mejoras en el código.

Me alegra poder compartirlo para que puedan utilizarlo como referencia a lo largo del curso y comentarles que cuenta con su repositorio de GitHub para que puedan clonarlo.

Pagina Web: https://luisvalladaresc.github.io/platzi-conf/
Repositorio: https://github.com/luisvalladaresc/platzi-conf

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

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’

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

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

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

Aquí les comparto 3 sitios para generar sus propios colores degradados y personalizar mucho mas sus sitios web.

• https://mycolor.space/gradient

• https://www.cssmatic.com/gradient-generator

• https://cssgradient.io/

Saludos.

Hay varias diferencias entre Bootstrap4 y Bootstrap5.

Si usas la v5 he hecho un resumen de todos los cambios necesarios en mi proyecto: https://github.com/jonathlan/bootstrap-essentials

Todo esta documentado en el readme:

• Rename .ml-* and .mr-* to .ms-* and .me-*.
• Rename ‘data-’ attributes to all JS plugins to ‘data-bs-’
• Rename .pl-* and .pr-* to .ps-* and .pe-*.
• Rename .text-left and .text-right to .text-start and .text-end.
• Rename ‘badge-’ to ‘bg-’
• Drop form-specific layout classes for the grid system. Use grid and utilities instead of .form-group, .form-row, or .form-inline.
• Update the way Tooltips are enabled via JavaScript.
• Wrap ‘Enviar’ button in a div with class ‘d-grid’ because bootstrap5 has dropped .btn-block class.
• Add the ‘text-dark’ class to the warninig badge because in Bootstrap5 text has changed to white.
• Rename .close to .btn-close for a less generic name. And remove span in the modal, which is not required anymore.
• Add some padding to the badges, Bootrap5 seems to have a slightly smaller one.
• Add padding to the textarea column in the form, because Bootstrap5 dropped form-row class.
• Add ‘text-decoration-none’ class to footer links, because in Bootstrap5 links are underlined by default.

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?

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

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

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

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">

Me estoy enamorando de Bootstrap xdd

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

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

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

Les comparto el código de index.css

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

#footer a {
    color: white;
}

😮 😮

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

Locoooooo! Esto está genial.

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

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

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

El color de fondo actual del footer es #03091E

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

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.

lo divertido de esta clase es que si copias algo de el inspector te sacan la cuenta de platzi jsjsjsjjs

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

Me gusta la idea de ir construyendo el sitio web pieza por pieza o sección por sección como si de un lego se tratara.
.
Resultado:

.
GitHub: https://github.com/iJCode1/bootstrap4_platzi/tree/main/proyecto

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

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

Siento que estoy aprendiendo un nuevo super poder. 🤯

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.

<!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>

Excelente Clase, gracias Profesor Sacha.

Clase magistral !!!-

Excepcional la clase muchas gracias profesor Sacha

Es necesario ponerle la id footer?

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

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

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

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

Listo clase aprendida grabada y practicada

Buena Clase.!!!

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

Genial !!!

excelente explicacion sacha. 😃

ahora ya se que significaba pb y pt

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

Muy práctico utilizar “Bootstrap”.

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>```

Pues yo me atasqué en el reto 3

<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>```

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?

muy buena clase y ejercicio

Todo muy fácil hasta ahora

Good!

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

Excelente ❤️

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

Hecho!!!

https://imgur.com/T0PWevu.jpg

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

Definitivamente tener mucho en cuenta el diseño responsivo.

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

estupendo, gracias sacha

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

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>

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

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

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

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

<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>```

exelente

f

que bien!