TU PRIMER SITIO WEB CON BOOTSTRAP 5

[@eeelvid]

excelente video, hay algunas clases que cambiaron como el .ml (margin-left) ahora es .ms y .mr (margin-right) ahora es .me... como dice en el video siempre hay que estar viendo la documentación para trabajar con Bootstrap, muchas gracias por la enseñanza.

[@juandejesussalgadocampos9278]

Buenas, quisiera preguntarte si tienes alguna respuesta al hecho de que ahora, en esta versión, el ícono de hamburguesa no se presenta cuando se comprime la pantalla. He estado buscando en la documentación pero no logro encontrarla.

[@jf404]

@@juandejesussalgadocampos9278 ¿Pudiste solucionarlo?

[@juandejesussalgadocampos9278]

@@jf404 creo que se solucionó solo amigo, en realidad no hice más ajustes y de pronto apareció

[@guise5210]

Tenías toda la razón, acabo de comprobarlo....gracias 😊

[@ProfeMarceloSegovia]

Hola buenas tardes, gracias por esta magistral clase, solo quisiera compartir que al momento de ver este video, un año después, estoy en sep del 2021, la clase "ml-auto" se cambio a "ms-auto". También cambio "data-ride" por "data-bs-ride", además de que si queremos aumentar la velocidad del carrusel, poder agregar a los div de las imágenes "data-bs-interval" 1000= 1seg. Todo esto lo observe al usar los archivos css y js de la ultima versión, y no los que amablemente nos comparte, y consultando la documentación me percate de los cambios, y supongo que habrá mas. Saludos y de nuevo muchas gracias!!!

[@samuelandres9924]

Ufff me salvaste, estaba deseperado por que ese navbar no cambiaba de lugar

[@jorgeluis9400]

Gracias por el data usare la CDN ultima entonces

[@jmgroove3205]

Buen tuto!....en el navbar no se me desplegaba la lista hacia abajo usando el boton. En el boton, el puso data-toggle data-target, yo tuve q poner data-bs-toggle data-bs-target y se soluciono. Supongo q es por la diferencia de versiones.

[@carlostumbaco3344]

eso mismo

[@rovac24]

Genial! Gracias, también tuve ese problema y con eso mismo se solucionó.

[@johnalexanderbarretodiaz9726]

yo le pongo asi pero aun asi no me funciona y tengo todo igual :/

[@jmgroove3205]

@@johnalexanderbarretodiaz9726 busca la documentacion, yo lo hice asi, en la web de boostrack, puede haber cambios nuevos

[@davidsilvatirado6499]

Gracias tío!

[@frankmelgarejo1011]

Hasta el momento esta muy bueno el video, ayuda bastante a comprender Bootstrap como único detalle en el min 40 en la sección del carousel el código que hiciste si muestra en la página pero no cambia con las demás imágenes, en esa sección fui a la documentación y pegue tal cual el código que mostraba en la página y con eso si se cambiaba de imagen con las demás. Saludos

[@BloodyTiger]

32:05 Cómo haces para que visual studio te muestre todas las etiquetas disponibles en el desplegable? es una extensión que le instalaste??? si es así dime cuál es por fa!! he probado varias y me sigue sin mostrar ese desplegable ;(

[@lucianomaldonado1577]

Excelente video, lo seguí y me funcionó sin ningún problema. Sólo que al principio estuve enrollado, porque no había trabajado con Visual studio code, pero una vez que entendí de qué se trataba y la extensión live server, todo fue más fácil. Agradecido.

[@eslycorredor998]

Me guie con tu explicación sobre bootstrap y también como ibas programando la página, me ayudo demasiado para programar un proyecto personal, muchas gracias♥!

[@keithdickinsongcontreras]

muy bueno tu tutorial lo saque con otra clase de contexto pero quedo nice gracias man éxitos , sigue así , saludos desde Colombia .

[@alejandramedina4444]

Muchas gracias por generar este contenido tan bien explicado y detallado, la verdad me resultó muy muy útil para aprender boostrap desde cero. Gracias también por compartir el ejemplo del proyecto realmente tu aporte es muy valorado para los que necesitamos aprender de esta manera. Un saludo!!

[@hudplaynew5231]

bravo es entendible este curso a usted le comprendo muy bien .

[@hectorpincheira6169]

Muy buen material para aprender... muchas gracias!

[@alzialzimurth2969]

Hola muchas gracias por el video, tengo una duda mirando las librerias el archivo ".ds.store" que es ? , no pertenece a las archivos compilados de js y css , y tampoco es del archivo popper

[@franxiandroid3068]

PARA LOS QUE NO SABEN COMO HACER QUE LE AUTOCOMPLETE LAS CLASES PRIMERO DEBEN INSTALAR UNA EXTENCION Y LUEGO ACTIVARLA: AQUI ESTA EL VIDEO QUE ME AYUDO (NO ES SPAM, SOLO QUIERO AYUDAR) kzbin.info/www/bejne/pZLPqWqhrbiIbdU

[@guiye9943]

Gracias man por el dato

[@liv_is]

gracias

[@munoztorresjhonramiro1594]

Gracias monpa

[@juliangonzalez4735]

messirve, muchas gracias parcero

[@RonyT728]

Nombre de la extención: IntelliSense for CSS class names in HTML

[@emanuelvillalonga171]

¡Muy buena introducción a Bootstrap, gracias por el aporte!

[@pabloestebanespinosagranad5826]

oye bro, nos podrías mostrar que configuración llevas en el vs code?

[@adacontreras]

Muchas gracias, espero que saques más vídeos así. Creo que verlo así y practicarlo es mucho más claro.

[@Henry_Nunez]

Excelente video y completa y clara explicación. 👍

[@ezealeman3179]

muy bueno tu video, o al menos por ahora va todo bien, voy por el min 50, mañana espero terminarlo. Soy nuevo en esto de boostrap pero vi que piden mucho en los trabajos y por eso me intereso hacer una pagina con esto y me aparecio este video

[@guachiii18]

Genial tutorial bro, aprendi bastante pero me queda mucho por mejorar :) lo termine al tutorial. Sos un genio!

[@Jandros98]

No te dio problemas al momento de terminar todo el código?

[@guachiii18]

@@Jandros98 Holaa todo bien? No la verdad que tuve un problema pero fue culpa mía de haber cerrado una etiqueta (contenedora) pero después ir paso a paso se termina y queda perfecto.

[@dayanaromerosoto1426]

¡Gran tuto! Marcos, gracias :3

[@patrimonioinmobiliariocom]

Primera visita. Al expandir a pantalla completa , la resolución es más baja de lo que se requiere para ver con detalle las letras de su pantalla con claridad, se ven borrosas. Hubiera publicado el video con mayor resolución aunque pesara más, sin sacrificar su nitidez. Por ahora lo que llevo visto está profesionalmente explicado, mejor que otros tutoriales donde la música distrae o se exhibe quien lo enseña. Ojalá publique otro tutorial de cómo hacer un carrusel de imágenes, y cómo publicarlo con imágenes de diferente anchura. Este detalle no se contempla en otros tutoriales donde todas son del mismo formato de tamaño. El website que estoy construyendo indicará que se vea mejor situando la pantalla del celular en forma apaisada u horizontal, pues las imágenes del carrusel son muy extendidas. Lo felicito por su trabajo y gracias por compartir. P.D. Carrusel pls!

[@rovac24]

Buenísimo muchas gracias!! Salió perfecto todo!

[@mathyucardozo9062]

Alguien sabe el nombre de las extensiones que usa en el video para autocompletar los datos de boostrap?

[@techdinecom]

Hola que tema utiliza en VS Code???

[@cesarabraham3487]

hola no si yo soy el problema o si tu explicacion es el problema, por favor ayudame. En la parte del minuto 17:25 yo ya copie los archivos de cssy jss e img pero no me sale ingual que tu. ni si quiera me salen los popper. ya lo intente todo y ni siquiera se pueden descargar losarchivos de git hub. que tengo que hacer para que me salga igual como a ti te sale en el minuto 17:25 por favor es urgente. por favor y gracias

[@luisedu40]

Hola, a mi no me agarro el icono de hamburguesa, no abre el menu al dar clic, tuve que usar boostrapt 4.6

[@hectorjairhernandezvelasco5770]

Si checas la documentación de Bootstrap en las Navbar, ahora se usa data-bs-toggle y data-bs-target. A mi tampoco me funciono hasta que le di una checada

[@jeffrysantiagomontesdeoca4574]

Saludos, quisiera saber que extensión está usando para cuando esta escribiendo clases de boostrap como por ejemplo "container-fluid" le aparezca el autocompletado o varias opciones de forma de usar ese container etc, en pocas palabras que cuando escriba código y sea clases de boostrap me dé varias opciones o recomendación de que escribir etc.

[@sebii387]

me preguntaba lo mismo

[@BloodyTiger]

En primer lugar gracias por el video!!! pero veo que en la descarga del proyecto de github, cuando abro el index desde la carpeta, no se aprecia bien la web con sus estilos. ¿Eso es que falta algo por hacer, no está completo? gracias y saludos!!!

[@10tronic]

Gracias por tremendo tutorial. ¿Que framework si permite el no usar para nada CSS?

[@Dahnielo]

muchas gracias por tu aporte !!!!! fue de bastante utilidad

[@facundobelardi8108]

no explicaste como se linkea bootstrap, despues de descargarlo, con el proyecto con el que se este trabajando

[@javicrowley]

wowww bootstrap 5 increible el tutorial!

[@FulgoreCobain]

Excelente tutorial, muchas gracias :)

[@GabrielSanchezFragoso9410]

como configuraste tu visual studio code?

[@afxcrush41]

Hola! me sirvió mucho tu tutorial... pero tengo una duda que no puedo resolver aún. ¿Cómo hago para darle espacio justificado al navbar para que ocupe todo el container? Gracias de antemano

[@Rk2o92]

ms-auto en bootstrap 5 para mover los items de la nav

[@gustavodelgadoolivares9481]

heroe

[@gd-mosho-pp1974]

IDOLO !!!

[@juandadgjU]

Cracksote, muchísimas gracias bro. :'3

[@22bears]

que tema estabas usando en vscode?? me encantaaa

[@israelramoncastrobecerra6524]

grande crack, gracias por hacer este tipo de cosas para estudiantes.

[@mau-ethsevilla3742]

buenas tardes, me sale error porque no reconoce los archivos bootstrap.min.css ni el popper.min.js me dice que el acceso al script ha sido bloqueado por CORS policy. luego dice que las solicitudes de origen Cross son únicamente soportados por esquemas HTTP, DATA, chrome-extension, https.

[@vidamrr]

necesitas correr tu sitio sobre un servidor. Usa la extensión de Live Share en VSCode para que no te salga ese error

[@mau-ethsevilla3742]

@@vidamrr me acabo de instalar el VS Code con la extension Live Share y me sale el mismo error. entonces, a que se deberá ese error?

[@vidamrr]

Tienes los archivos locales o los estás tratando de jalar de algún sitio? Si es la CDN debería dejarte

[@mau-ethsevilla3742]

@@vidamrr mis archivos son locales es mi pc...

[@edgarenriquelopezcortes4556]

Buenas Tardes - > a mi la barra de navegacion no se posiciona a la derecha (con ml-auto)...

[@marcomunozgormedino8831]

Ya no funciona con ml-auto, prueba con ms-auto

[@ProgramarDesdeCero]

Excelente tutorial

[@nadiyaklokova8175]

hola. Gracias por compartir, el tutorial esta genial. Tengo una pregunta para el autocompletado de clases de bootstrap hay que instalar un plugin? gracias

[@sebastianquesada5303]

Muy bueno. me suscribi y di like. gracias. saludos.

[@willpassion1404]

Excelente video. Gracias !

[@davidmikelpachecojimenez9041]

Buen tutorial pero considerar algunos cambios de boostrap 5, por ejemplo: data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" TAMBIEN navbar-nav ml-auto es ahora navbar-nav ms-auto

[@arnoldsilva494]

tienes el codgio junto como te salio porque al hacer los cambios aun no puedo usar el menu hamburguesa adecuandamente

[@MrARONXD]

por eso ahora no funciona el menu despegable ? , porque es lo que estoy intentando pero no responde , yo pense que era que la carpeta de JS no me respondia :(

[@ed0852]

Mejor tutorial ever!! Nuevo suscriptor

[@gerardoanzora9194]

¡Hola! Una duda, el "Ribbon" no me funciona en el HTML de VSC y en la previsualización del navegador, lo probé en Codepen y si me funcionó tal y como debe de verse, supuse que sería por un error en alguna parte del código completo del HTML creado en VSC, así que lo pegué en Codepen tal y como lo tengo en VSC, y sí, funcionó, pero en el HTML creado en VSC no funciona, aún probándolo en otros navegadores, ¿Qué crees que podría ser, me podrías ayudar? Gracias

[@lukareyes8188]

Para el margin-left del navbar no es mas ml-auto sino ms-auto

[@gaolave]

Hola Franxi... excelente tu video. Muy claro y didáctico. Quiero consultarte por la extensión de VSCode que permite hacer que el cursor de texto se anime verticalmente. Te agradeceré si puedes indicarme cuál es? muchas gracias. Adiós.

[@vidamrr]

No es extensión, en las propiedades de VsCode puedes escoger cómo quieres que se vea visualmente el cursor

[@ignaciosabate5176]

Tengo problemas con el menú de hamburguesa que no se despliega. He cambiado lo de data-bs-toggle data-bs-target y sigue sin funcionar.

[@BloodyTiger]

Lo completé! Me quedó igual, solo cambié algo del css por preferencias personales, simplemente. Algo rápido fuiste cuando tenías ya código copiado y lo pegabas rápidamente. Y como opinión aunque solo sea un detalle, faltaba que hubieras cambiado el texto de los cuatro Cards para que no aparezca el de por defecto de Bootstrap. Por lo demás muy bien! parece tal cual la web oficial de Nintendo jejeje.

[@stavgraff]

Un exelente video eres grande!! saludos

[@KacOrius]

Excelente, muchas gracias.

[@JoanJimenez]

Muy, muy buen tuto. Gracias!!!

[@stalishgames]

TREMENDO VIDEAZO PA

[@rodrigosam8435]

cuando coloco " bg- " no me aparece para cambiar los colores alguien me explica por que pasa eso ? o que me fala por instalar

[@2005bgva]

Por el minuto 25 indicas que vas a cambiar tu perfil en Visual Code en qué consiste eso? se puede configurar perfiles de acuerdo al entorno con el que vayas a trabajar? Tienes algún vídeo sobre eso?

[@abrahamguamanmiranda530]

una pregunta puedo trabajar toda esta practica en sublime.text.. les agradezco su respuestas....

[@EiielM9]

Sip

[@abrahamguamanmiranda530]

@@EiielM9 y como hago para que lo ejecute en el servidor y ver en el navegador pero de por medio del local host: una idea plis.

[@luisayala3780]

@@abrahamguamanmiranda530 Pasate a VS code amigo, tiene muchas extensiones que facilitan a la hora de trabajar

[@luis678678]

Hola disculpa a mí no me funciona el botón del navbar ya revise la documentación de bootstrap 5 y nada tengo los mismos pasos, e incluso copie ejemplos de la documentación de Bootstrap, ya descargue los paquetes de tu repositorio y los de la pagina de Bootstrap y no me funciona

[@rafas173]

me gustan los colores de tu código. Que tema usas ?

[@saulsmith21]

hola, cual es la extension en particular que usas para las clases?

[@luisblanco2768]

Buenas, excelente video. Amigo una pregunta, que tipo de extensión utilizas para que te salgan las clases de bootstrap 5? Muchas gracias de antemano. 👍❤

[@oscarvarela4196]

x2

[@cip0314]

Hola como te va? te hago una consulta... como configuro el VS para que al poner "bg-" me salgan las opciones disponibles como te sale a vos.

[@vidamrr]

Sale por defecto pero hay extensiones de CSS, búscalas como intellisense CSS

[@cip0314]

@@vidamrr Gracias! Instale el que me nombras y funciono!

[@agustinrossello8466]

Que tal! Alguno tiene idea por qué en la navbar del principio no me reconoce la hamburguesa? Puedo clickear y todo pero no aparece las 3 lineas ni tampoco se despliega el menú

[@eddiaz1856]

Excelente trabajo

[@jhojanerorozcoamador3440]

a mi no me sale el navbar de minuto 37:38

[@creacionesbrunila]

muy bueno ! lo termine xd

[@rastamofir]

Excelente tuto amigo!!!

[@enzofazul]

Hermano gracias por tus tutos, ¿Que teclado usas?

[@camilotapias1287]

Realice el proceso 2 veces y se me presenta un error en la parte de amiibo :(

[@olimac007]

Gracias :) excelente video, muy didáctico! Muy buen proyecto

[@chevronet4012]

Buen video al utilizar en forma pequeño se muestra el icono del codigo: pero no muestra las opciones del menu al hacer clic.

[@liv_is]

data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" cambian estos dos

[@AC-uz5ps]

@@liv_is gracias crack, tenia el mismo problema

[@johnalexanderbarretodiaz9726]

@@liv_is yo los cambio asi pero aun asi no me aparecen cuando le doy click al menu

[@alejandramedina4444]

@@liv_is los cambio y sigue sin desplegarse

[@Cristian-xg2uw]

buen video me ayudas mucho

[@jeftdan6485]

Que extención usa de bootstrap en visual studio code?

[@mariafernandarodriguez8639]

Muy buen tutorial

[@jimmyvalverde2266]

Excelente video amigo Vida MRR, me gustaría que hicieras un video sobre la funcionalidad de navbar, porque estoy haciendo un proyecto y tengo varios archivos html y cada vez que abro cada uno me lleva a diferente pagina, me gustaría que el navbar siempre se quede sobre la pagina

[@osloren5614]

Muy bueno! Gracias!!!!

[@diiexe]

gracias amigo me re sirvió esto

[@richardfernandojimenez9523]

Excelente me encanta Bootstrap

[@francopacheco5629]

que extension utilizas para los snippets? no estoy logrando que me aparezcan :(

[@jorgeluis9400]

Bootstrap 5 Quick Snippets Y The Powerful Bootstrap prueba con estas

[@MikyDev]

Me gusta la personalización de tu visual studio code me podrías decir que tema utilizas?

[@Nifrod]

Muy util, gracias!

[@Bmera666]

Muchas gracias bro me encanta tu contenido

[@orlandomanuelospinohernand9869]

Hola puedo utilizar la plantilla para un proyecto personal 🤔🤔

[@vidamrr]

Claro! solo te invito a darle estrellita al repositorio para saber que te fue útil 👌

[@averanto]

El despliegue del ménu en celulares ya no funciona con data-toggle y data-target en bootstrap 5.0 Ahora se debe de colocar data-bs-toggle y data-bs-target para que funcione. Saludos.

[@alejandramedina4444]

Hola antonio, bajé los archivos boostrap remplace y cambié las dos clases a esas y nada. Hiciste algo más ?

[@averanto]

@@alejandramedina4444 Hola. No, nada más. Que versión estas usando? Si te da problemas bajate la v4, lo puedes hacer desde el panel principal de Bootstrap(HOME) vas a ver dos botones uno que dice Get started, le das clic y te lleva a la página de Instrucción. En esta página si te fijas arriba en el lado derecho, justo de bajo del botón de Download vas a ver un desplegable y desde hay puedes elegír la versión y de esta forma seguir con el tutorial sin ningún inconveniente más. Espero ayudarte con esto. Saludos.

[@alejandramedina4444]

Muchas gracias lo hice en v 5 ya quedó gracias

[@luiswetowkn]

Gracias!

[@oscarvarela4196]

Completado!!

[@teatreves1]

Buenas genio muy buen video gracias por el aporte ...tengo una consulta como hago para que las fotos no se me deformen en el carousel slds

[@vidamrr]

en qué momento se te deforman Richard?

[@teatreves1]

@@vidamrr cuando rederiso las imágenes en carousel

[@teatreves1]

@@vidamrr cuando rederiso las imágenes en carousel

[@davidastudillo2453]

@@teatreves1 ya se que es muy tarde para responder pero talvez sea el w100 que en realidad se escribe w-100 ?por cierto, como vas programando o lo dejaste, algun consejo?

[@CharlyGutierres]

Esos 2 imagines podrias pasar, queria usarlo para mi trabajo

[@ElPibeMix]

FUAAAAAA ES UNA BANDA DE LOREEEE

[@olmedojacomebaque2864]

buen aporte !! que plugin usas para las ayudas en las clases?

[@vidamrr]

nunguno amigo, el tema es que tengo el archivo CSS local, entonces VS Code lo detecta y sale el intelisense

[@cristianrazo5014]

Con la extension Html Class Suggestions

[@ariel6148]

Genial Marcos!!!

[@andressanchez1459]

Excelente video amigo, estoy iniciando en el mundo de la programación , por tanto quería saber que fuentes utilizas para descargar esas imágenes tan bonitas que utilizas, en especial en los fondos, muchas gracias

[@alexloaiza4404]

no me funciona ml-auto? que puede estar mal?

[@yoelnicolas6561]

ahora es ms bro, abrazo

[@josephparedes9403]

@@yoelnicolas6561 Gracias Broth llevo días buscando esa repuesta!! =D

[@Amulatess]

en que parte del codigo ocupas ml auto

[@agustinjobhernandezmontes4639]

Muy buen video, felicidades

[@josephlojan827]

Hola. Gracias por tu video. Los breakpoint del minuto 2:14 son los mismos de la versión 4 ? o son exclusivos de esta versión? Gracias.

[@ramilo69]

Oh...gracias. un buen tutorial!!!

[@vidamrr]

gracias a ti por ver el Antonio

[@rudyajuchan818]

Alguien sabe si boostrap es Open source? O si hay problema el usarlo en un proyecto

[@isaacmartinezrizo]

muchas gracias, en donde descargar las imagenes de cuadritos?

[@paulpaucarb]

en github

[@isaacmartinezrizo]

@@paulpaucarb gracias pero me refería para buscar otras formas

[@facundobanegaz5800]

tengo una duda que pasa con lo de html semantico?

[@vidamrr]

En el video no lo usé para explicar más lo de Botstrap, no pasa nada tampoco pero si lo puedes usar úsalo

[@francogilli4199]

QUE TEMA Y LETRA USAS?