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
Introducción al curso
Repositorio del curso de bootstrap
Bootstrap 4 ¿Qué trae de nuevo esta versión?
¿Que es un framework de frontend?
Nuestro Proyecto: Hola Mundo de Bootstrap
Creando el sitio web
La grilla de Bootstrap
Reto: La grilla de Bootstrap
El footer
El header de nuestro sitio
Creando un carousel de imágenes
Agregando texto informativo del evento
Agregando botones
Las cards de Bootstrap 4
Pastillas de texto
Agregando un contenedor de ancho completo
Los formularios de Bootstrap 4
Agregando un tooltip
Scrollspy: Conociendo la ubicación del usuario en el header
Agregando un modal para comprar tickets
Un nuevo formulario para completar la compra
Deploy a producción
Poniendo nuestro sitio en producción
Conclusiones del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
El header de nuestro sitio
8/21Recursos
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:
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: “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.
Empecé con el curso de Desarrollo Web Online y este de Bootstrap! hace 4 o 5 días…lo 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 “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
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 “Conf Hawaii” para que este centrado pueden usar este CSS
.navbar-brand {
display: flex;
}
**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
Hola muchachos les dejo el Logo 😃 https://www.omaralvarezo.com/Omar_Alvarez/Image_portafolio/platzi.png
¿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=“navbar-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:
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 “a” 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
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 “visualizar” 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
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=“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
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.
https://www.youtube.com/watch?v=SEXm5OM-U3s&ab_channel=Platzi
Les recomiendo este vídeo
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.