El header de nuestro sitio

En bootstrap 5 ya no se usa ml-auto para llevar los elementos a la derecha. Ahora se usa ms-auto. En bootstrap 4 era l y r para left y right, Ahora es:
s = start
e = end

No sé ustedes, pero me dolió en el alma usar el “!important” después de varios cursos donde te recuerdan a nunca usarlo. 😦

Si queremos que el menú no se colapse en dispositivos con ancho mediano para abajo, podemos usar: “navbar-expand-md”

ME ENCANTAAAA y yo rompiendome el coco haciendo los navbar con puro css ❤️

Hice un diseño y temática un poco diferente pero guiado por el código que se utilizo en clase basado en el Bootstrap.

Si estan usando la version 5 de Bootstrap al final del video cuando el profesor agrega el container, en la version 5 viene como “container-fluid”. Solo quiten el “-fluid” y listo.

si no les sale el desplegable como lo llaman la hamburguesa asegurarse que tienes copiado esto al final del body antes de cerrar la etiqueta </body>.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>```

IMPORTANTE

Ahora el Margin Left, se calcula por medio de “ms-auto”

En Bootstrap 5.1, el Nav ya contiene un container. Solo quitenle el -fluid para que les quede como en el video.

Menú de anvorgesa

Al utilizar el <header> y luego el <nav> estamos cumpliendo con la semántica de HTML5 es recomendable x cuestiones de semántica

En bootstrap 5 en vez de usar mr-auto y ml-auto podemos usar me-auto y ms-auto

Uso !important. Adios osos polares 😦

vengo haciendo varios cursos en Platzi y en todos dicen EVITEN EL USO DEL !IMPORTANT jajajaja entonces en esta clase me entro miedo de usarlo jajajaja

si desean arreglar donde dice “Conf Hawaii” para que este centrado pueden usar este CSS

.navbar-brand {
  display: flex;
}

ms-auto en vez de me-auto para el margen izquierdo.

Para dejer del mismo tamanio el header que el footer simplemente borren el -fluid del contenedor del nav, no tienen que agregar un nuevo container como hace sacha.

pero no esta la carpeta con la imagen para colocarla en el proyecto

Les recomiendo mirar la documentacion de bootstrap 5, este curso te sirve para todo bootstrap, sin embargo hay ciertas cosas que ya no funcionan en bootstrap 5 como el ML-auto, o las clases de botones, etc.

.navbar-light para usar con colores de fondo claros o .navbar-dark para colores de fondo oscuros. Luego, personaliza con .bg-*utilidades.

En el minuto 12:05, no agreguen ningun container si usan Bootstrap 5, sólo hay que quitarle el “-fluid” al div dentro del nav.

**Bootstrap V5.1 ** Si tienen problemas con el menú hamburguesa (Toggle) que abre pero no cierra, mi solución fue tener activas estos dos cdns de boostrap antes de cerrar la etiqueta body:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

saludos!

Tenia entendido que poner “!important” se considera una mala practica, considero que hay que actualizar este curso.

Me encanta la dualidad que se crea con bootstrap y el resto de css. Con muy pocos movimientos permite una web bastante sobria y profesional, mientras con los conocimientos previos de css te permite complementar y echar más imaginación. Me encanta

porque hacer los estilos con selectores de ID eso no me parece correcto…

Pense que la idea del curso era de que nosotros hagamos el codigo, no de copiarlo

Yo creí que sabia usar bootstrap hasta que entre a este curso :v… que loco XD

¿por qué tiene que decir que el logo está en la sección archivos si no lo está?

¿Cuándo van a actualizar el curso? ESTAMOS PAGANDO

Para mover la barra de navegación en bootstrap 5 se hace con ms-auto

• s = start
• e = end

me encanta este estilo de videos, tan dinamico, la calidad de imagen etc

Si no les sale el menu cambien los links de referencia del css y de jquery y popper.js. A mi por copiar todo el código junto como hizo sacha, no me salia el menu.

tenia el problema de que el menu no se iba a la derecha y encontre que era por que estaba usando bootstrap 5 entonces lo tuve que cambiar a bootstrap 4 para que ya funcionara y se soluciono.

no pude enviar el nav a lado derecho!

saben como en el evento hover de las etiquetas “a” poder cambiar el color. es decir cuando pase el mouse sobre uno de los items del menu su fondo cambie de color.?

El menu responsive de mi navbar no funciona, alguien me podria echar una mano ?
Hice todo como en el video, pero al achicar la pantalla mi menu desaparece y aparece el icono de menu responsive, pero no funciona, lo clikeo y no pasa nada.

no me funcionó el menu hamburguesa, le doy click pero no despliega nada 😦

Me pareció muy útil la clase mr-auto no conocía su función.

Muy bien explicada la clase de Header, es increíble poder usar la documentación y modificar el texto durante la clase. Me gusta como va el curso.

Increíble clase! Me gusta mucho la simpleza que ofrece Bootstrap!

Ahora en vez de mr y ml es me y ms.

Chicos,
Para alinear a la derecha el menu, con Bootstrap 5 ya no se hace con mr o ml, sino con ms y me (s=start / e=end) y el codigo queda asi

<ul class="navbar-nav ms-auto mb-2 mb-lg-0">```

El ul aparece ahora así
<ul class=“navbar-nav me-auto mb-2 mb-lg-0”>

Hola, saludos!!!
Uno cosita, ya no es mr o ml ahora es ms o me, espero que les sirva de ayuda !!

Bootstrap 5 ya agrega el contenedor asi:

<div class="container-fluid">

No sé cómo continua el código en el futuro, pero por ahora para evitar el uso de !Important coloqué el CSS de la siguiente forma:

#header-nav .text-platzi
{
    color: #97c93e;
}

Estaba renuente de aprender bootstrap pero ahora no se que hacia con mi vida sin el en ella, me encantaa

Veo que Sacha usa identificadores para aplicar estilos, en otros cursos han dicho que lo mejor usar clases, pero entiendo que al usar un framework como Bootstrap, agregarle más clases causaría un poco de confusion, jeje.

Para los que están usando Bootstrap 5 y no les alinea la imagen con el navbar, adjunto código

HTML

<!doctype html>
<html lang="es">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" href="index.css">
    <title>PlatziConf Hawai</title>

</head>

<body>
    <!--Header-->
    <header>
        <nav id="header" class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <img src="assets/images/platzi-logo.png" alt=""> Conf Hawai
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span>
                    </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">La conferencia</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Los oradores</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">El lugar y la fecha</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Conviértete en orador</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-platzi" href="#">Comprar tickets</a>
                        </li>
                    </ul>
                </div>

            </div>
        </nav>
    </header>

    <!--Fin header-->
    <!--Footer-->
    <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="#">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>
    <!--Fin footer-->

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js " integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf " crossorigin="anonymous "></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js " integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG " crossorigin="anonymous "></script>
    <!--
 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js " integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc " crossorigin="anonymous "></script>
-->
</body>

</html>

CSS

.text-platzi {
    color: #97c93e !important;
}

header #header img {
    width: 80px;
}

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

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

les hago un aporte, estuve utilizando el codido para generar el navbar que esta en el link de la descripcion de esta clase, pero no me funciono, y me di cuenta porque la version de bootstrap que esta en este video es la 4.1 pero hoy 13/08/2021 es la 5.1 y con esa si me funciono,

Leccion: SIEMPRE VERIFICAR LA VERSION CON LA QUE TRABAJAMOS

Hay algunas inconsistencias porque ya tenemos Boostrap 5, ejemplo en el ml o mr-auto, ahora es ms o me (start-end). Buenísimo el curso y el profe, pero deberían de actualizarlo

mr = margin right
mr-auto entonces es: margin right auto
ml = margin left

que buen curso lpm! sacha idolo muy buenos cursos siempre.

que comando se utiliza en Mac para comentar lineas de código ??

Va quedando muy Bien.!!!

Realizando el Header y el nav
![](

No entendí mu bien lo de mr-auto y ml-auto. Entiendo que coloca el elemento lo mas a la izquierda que pueda o lo mas a la derecha que puede.

Bootstrap!

Excelente clase, hay cosas que no sabia a reforzare conocimiento.

como coloco iconos

como escribo un comentario como hace ek oara cerrar el footer----? minuto 4:15 aprox

Para agregar una animacion de scroll a nuestos <a>, dejen en blanco el atributo href y utilicen el siguiente codigo javascript:

var ref = document.getElementById("reforador");
var elmnt = document.getElementById("conviertete-en-orador");

ref.addEventListener('click', elmnt.scrollIntoView({behavior: "smooth"}));

Excelente clase

genial listo

Es increíble todo lo que estamos aprendiendo, Bootstrap es una herramienta (librería) maravillosa, estuve buena parte de una tarde creando un burger menu y aquí se te provee de uno, que además es mucho más funcional y estético, impresionante.

El profesor tira muchos tips sobre diseño web que si prestamos atención, si bien no son precisamente tips sobre bootstrap, nos da premisas para llegar a diseños más prolijos (cuando compara el padding del footer señalando que no coincide con el del header, por ejemplo) y también más intuitivos y más llegadores a la audiencia para captar clientes (cuando menciona explícitamente resaltar el anchor de Comprar tickets porque es lo que queremos que hagan).
Esto, a un ser tan backend como yo 🤣 le sirve muchísimo!

Buenas! Alguien sabe que pasa con la version 5 de bootsrap.
Estoy tratando de acomodar los links del navbar a la izquierda.
Con la version 4.1.3 (es la version que usa Sacha) si me deja, pero con la version 5 no hace nada.

Recuerden si están haciendo el curso hoy, que la versión actual de Bootstrap es la 5.1 y algunas cosas han cambiado. Sin embargo pueden seguir el curso al pie de la letra sin necesidad de cambiar nada si en la url de bootstrap cambial el “5.1” por “4.1”. Los cambios son mínimos y para hacer el curso puede ser mejor seguir los pasos del profe y luego que aprendan ya buscar las diferencias que hay entre las versiones (una vez que hayan aprendido, entender esas diferencias será muy fácil).

Para los que se nos dificulta “visualizar” como es un buen diseño, bootstrap es la salvación.

Teniendo en cuenta la semántica se debería usar la etiqueta header.

Excelente tip para mover los elementos

TENGO ESTE ERROR COMO LO SOLUCIONO NO ENCUENTRO NADA EN INTERNET!

gracias, me sirvio mucho alinear el navbar al resto del sitio con el container

Menú de Hamburguesa

Excelente clase, utilizando la versión 4.1 para seguir el paso.

Hola, yo tengo mas cosas que el mr-auto me aparece todo eso y a la hora de poner ml-auto no sucede nada.
<ul class=“navbar-nav mr-auto mb -2 mb-lg-0”>

Buenas tardes, estoy usando visual como editor, estoy siguiendo el paso a paso y el color del navbar no me carga. gracias

excelente explicación!!!

Estos elementos de MR, PT funcionan en la versión 3?

Muy bueno !!!

Apuntes:
En el navbar de Bootstrap, podemos modificar el fondo a través de las clases navbar-light y bg-dark. Para cambiar la orientación de los elementos del navbar, cambiamos la clase de mr-auto (margin-right: auto; es decir, los elementos se corren a la izquierda), por ml-auto, Lo cual hará que los elementos de la lista desordenada se corran a la derecha.

Coloque el pading dentro del archivo index.css de la siguiente manera:

#footer {
    background: linear-gradient(90deg, #1c3643, #273b47 25%, #1e5372); 
    padding-top: 20px;
    padding-bottom: 20px; 
}
#footer a{
    color: white;
}

Se le olvido dejar los archivos xD

Genial gran clase

Muy genial y útil lo del menú desplegable en dimensiones de celular por ejemplo.

Bootstrap trae un responsive design que ayuda demasiado.

Excelente…

Por favor compartan el material de clase como las imágenes para seguir con la guía
del proyecto 😕

Genial! Excelente clase.

No me gustó tener que usar el important!, creo que por eso los desarrolladores están optando por otros frameworks de CSS que sean más flexibles a la hora de trabajar

Excelente lección.

Tuvo chévere la clase

Realmente hermoso.

Para no utilizar el !important pueden utilizar el siguiente selector, o bien cualquier ID que sea padre de elemento a modificar (en este caso “.text-platzi”). esto por el modelo de datos jerárquico de CSS

#header .text-platzi {
    color: #97c93e;
}

Si desean evitar el uso del “!important”, pueden colocar la siguiente clase: “.navbar-nav .nav-item .text-platzi”

Vamos avanzando!

Considero que con buenas bases de css estos contenidos se saborean mejor. Muy lindo lo que estoy aprendiendo y como lo explica el profe ,da ganas de jugar con los códigos jeje

Tengo problemas con el Menu hamburguesa, No se porque cuando pongo la pantalla pequeña no parece y por el contrario desaparece el contenido. que podria estar pasando?