No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

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 88

Preguntas 22

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥榯ext-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.

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 鈥榙ata-鈥 attributes to all JS plugins to 鈥榙ata-bs-鈥
  • Rename .pl-* and .pr-* to .ps-* and .pe-*.
  • Rename .text-left and .text-right to .text-start and .text-end.
  • Rename 鈥榖adge-鈥 to 鈥榖g-鈥
  • 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 鈥楨nviar鈥 button in a div with class 鈥榙-grid鈥 because bootstrap5 has dropped .btn-block class.
  • Add the 鈥榯ext-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 鈥榯ext-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鈥arta 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 鈥淩ow鈥 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 鈥減isara鈥 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鈥

Gracias

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 鈥淏ootstrap鈥.

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

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=鈥減y-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!