No tienes acceso a esta clase

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

El header de nuestro sitio

8/21
Recursos

Conocemos el componente de Navbar de Bootstrap para crear el encabezado de nuestro website. Conoce m谩s de su manejo en https://getbootstrap.com/docs/4.1/components/navbar/

Aportes 137

Preguntas 31

Ordenar por:

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

o inicia sesi贸n.

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

La imagen no est谩 en los archivos y enlaces de este video, est谩 en el repositorio del curso, por ac谩 [(https://github.com/platzi/bootstrap)]
馃憣鉁

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: 鈥渘avbar-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.

Empec茅 con el curso de Desarrollo Web Online y este de Bootstrap! hace 4 o 5 d铆as鈥o que aprendo en ambos lo estoy combinando para llevar m谩s all谩 el ejercicio (para entender que pasa)! :3 me puse a hacer esto鈥>鈥https://dexloggica.github.io/DexPortafolio/ han sido horas maravillosas鈥 espero seguir aprendiendo 馃槂 se los comparto para que vean que se logra con un poco de html5 y css, y bootstrap! agiliza much铆simo las cosas鈥

Si estan usando la version 5 de Bootstrap al final del video cuando el profesor agrega el container, en la version 5 viene como 鈥渃ontainer-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 鈥渕s-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

Para los que usen un IDE online (como codepen o stackblitz) pueden a帽adir la imagen del logo con la etiqueta

<img src="https://github.com/platzi/bootstrap/blob/gh-pages/assets/images/platzi-logo.png?raw=true" alt="Platzi logo">

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 鈥淐onf Hawaii鈥 para que este centrado pueden usar este CSS

.navbar-brand {
  display: flex;
}

Aqui esta de nuevo el enlace del repositorio del curso, por si no lo tienen abierto:

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

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.

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.

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

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

驴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

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.

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

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

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

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

Header (

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谩?

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

El ul aparece ahora as铆
<ul class=鈥渘avbar-nav me-auto mb-2 mb-lg-0鈥>

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

Aqu铆 tienen la documentaci贸n para la versi贸n 5.1 de bootstrap:

https://getbootstrap.com/docs/5.1/components/navbar/

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

Ya va tomando forma nuestro proyecto 馃槑
Les comparto el repositorio de GitHub donde voy alojando el c贸digo: https://github.com/iJCode1/bootstrap4_platzi
.
Resultado:

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

Bootstrap 5 ya agrega el contenedor asi:

<div class="container-fluid">

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.

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

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

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

he seguido los pasos y no se alinean!

no pude enviar el nav a lado derecho!

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.

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

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

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.

Me pareci贸 muy 煤til la clase mr-auto no conoc铆a su funci贸n.

no me funcion贸 el menu hamburguesa, le doy click pero no despliega nada 馃槮

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.

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.

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

Hola, para que el menu desplegable m贸vil funcione deben reemplazar el link de Jquery que viene por defecto, este me funcion贸:

<script
  src="https://code.jquery.com/jquery-3.5.1.slim.js"
  integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM="
  crossorigin="anonymous"></script>```

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

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?

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

Me gustan las grillas

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 alguien usa la versi贸n m谩s reciente de bootstrap, recuerde pegar tambi茅n la secci贸n de script m谩s reciente hasta abajo.
Bootstrap 5.1.3

Ac谩 dejo mi primer sitio hecho en bootstrap paralelamente viendo esta clase

https://santatevisita.000webhostapp.com/

En Visual estudio code. para comentar de manera rapida utilicen el atajo, Ctrl + K +C

Esto es genial! ya no tendre que pelearme con css por horas 馃槂

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 鈥渧isualizar鈥 como es un buen dise帽o, bootstrap es la salvaci贸n.

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

Este es el link del Navbar para Bootstrap 5.0

https://getbootstrap.com/docs/5.0/components/navbar/

Realmente hermoso.

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=鈥渘avbar-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

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.

Pensar que cuando empezo todo esto taraba horas o dias de trabajos, o te la tenias que ingeniar utilizando tablas鈥 uff bootstrap salvo la vida a varios鈥

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!

Tuvo ch茅vere la clase

Por favor compartan el material de clase como las im谩genes para seguir con la gu铆a
del proyecto 馃槙

Excelente tip para mover los elementos

y de donde descargo la carpeta de aseets no esta en archivos, puedo usar una .jpg?

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

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

excelente explicaci贸n!!!

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

Realizando el Header y el nav
![](

como coloco iconos

Teniendo en cuenta la sem谩ntica se deber铆a usar la etiqueta header.

Va quedando muy Bien.!!!

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

Muy bueno !!!


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

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.