TU PRIMER SITIO WEB CON BOOTSTRAP 5

[@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

[@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 😊

[@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!

[@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♥!

[@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.

[@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

[@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

[@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!!

[@dayanaromerosoto1426]

¡Gran tuto! Marcos, gracias :3

[@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!

[@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 :(

[@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 ;(

[@adacontreras]

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

[@emanuelvillalonga171]

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

[@hudplaynew5231]

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

[@hectorpincheira6169]

Muy buen material para aprender... muchas gracias!

[@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!

[@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

[@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

[@keithdickinsongcontreras]

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

[@javicrowley]

wowww bootstrap 5 increible el tutorial!

[@pabloestebanespinosagranad5826]

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

[@rovac24]

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

[@ElPibeMix]

FUAAAAAA ES UNA BANDA DE LOREEEE

[@Henry_Nunez]

Excelente video y completa y clara explicación. 👍

[@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

[@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.

[@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

[@ProgramarDesdeCero]

Excelente tutorial

[@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

[@israelramoncastrobecerra6524]

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

[@lukareyes8188]

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

[@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

[@sebastianquesada5303]

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

[@luisalvarez6375]

Con este video sigo en pelea si usar TailwindCss o Bootstrap para alguno de mis proyecto (ノ｀⌒´)ノ..┻┻ Buen video por cierto ;)

[@vidamrr]

ahí se van dando, espero pronto subir un tutorial de Tailwind

[@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!!!

[@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.

[@JoanJimenez]

Muy, muy buen tuto. Gracias!!!

[@cristiancanizales2566]

La propiedad ml que es margin left se cambio en bootstrap 5 por ms

[@Amulatess]

en esta parte del codigo? (aqui iria ms)???? Home Summer Pack About Registrer Sing in

[@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

[@Dahnielo]

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

[@stalishgames]

TREMENDO VIDEAZO PA

[@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

[@FulgoreCobain]

Excelente tutorial, muchas gracias :)

[@fabianbustos5188]

No dudo de que fue un excelente tutorial, pero está desactualizado. Lo fui siguiendo hasta el minuto 37 e iba perfecto, de hay en más lo que se iba explicando no se reflejaba con lo yo hacía. Pensando que era algún error de mi parte, descargue el código fuente para compararlo/ejecutarlo. El menú no aparece horizontalmente, y al achicar la pantalla no aparece el botón hamburguesa del menú. Creo que estaría bueno como desafío para los que siguieron este video, corregirlo.

[@alzialzimurth2969]

eso mismo me paso , pero es un buen ejercicio por que si vas comparando las librerias y practicando para q te quede igual

[@ed0852]

Mejor tutorial ever!! Nuevo suscriptor

[@creacionesbrunila]

muy bueno ! lo termine xd

[@willpassion1404]

Excelente video. Gracias !

[@mathyucardozo9062]

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

[@KacOrius]

Excelente, muchas gracias.

[@oscarvarela4196]

Completado!!

[@richardfernandojimenez9523]

Excelente me encanta Bootstrap

[@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

[@facundobelardi8108]

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

[@ariel6148]

Genial Marcos!!!

[@stavgraff]

Un exelente video eres grande!! saludos

[@enzofazul]

Hermano gracias por tus tutos, ¿Que teclado usas?

[@mariafernandarodriguez8639]

Muy buen tutorial

[@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

[@rastamofir]

Excelente tuto amigo!!!

[@Bmera666]

Muchas gracias bro me encanta tu contenido

[@manuelpalaciossantil]

Excelente, si hubiera vídeo de cómo convertir o adaptar para una plantilla de WordPress o Joomla sería un gol. Gracias

[@Nifrod]

Muy util, gracias!

[@eddiaz1856]

Excelente trabajo

[@22bears]

que tema estabas usando en vscode?? me encantaaa

[@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

[@osloren5614]

Muy bueno! Gracias!!!!

[@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?

[@Cristian-xg2uw]

buen video me ayudas mucho

[@rafas173]

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

[@agustinjobhernandezmontes4639]

Muy buen video, felicidades

[@10tronic]

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

[@MikyDev]

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

[@techdinecom]

Hola que tema utiliza en VS Code???

[@iElectroStyle]

Gracias!

[@ramilo69]

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

[@vidamrr]

gracias a ti por ver el Antonio

[@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.

[@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

[@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

[@diiexe]

gracias amigo me re sirvió esto

[@cristam157]

Hola amigo muy bueno tu tutorial. Te animarias en hacer otro pero con la ultima version del portal de nintendo animal crossing?

[@ethereum.bitcoin]

lo de breakpoin lo hubieses puesto por el medio del video porque ni empezar ya me aburrio y me dio ganas de sacar,, aunque no lo hize

[@vidamrr]

Jajajajajajajajajajajajajaja

[@AntonioSanchez-bi3nu]

Excelente. Cómo haces para aprender tanto? Enfocarse sólo en Bootstrap o también aprender Bulma, Tailwind, Materialize, etc?

[@john5891]

Aprende los demás también

[@ZncroxdGaming]

casi todos se parecen mucho, solo que los nombres de las clases cambian, pero todos se parecen casi xd

[@jorgeluis9400]

La clave esta en la practica, el nos apoya en el primer paso de aprender, ya depende de nosotros poderlo dominar

[@coderd8780]

Muy Bueno

[@rubenbaez7331]

Muy buen video.

[@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

[@pina1262]

excelente!

[@GabrielSanchezFragoso9410]

como configuraste tu visual studio code?

[@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 👌

[@andrair88]

Buenísimo

[@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...

[@CharlyGutierres]

Esos 2 imagines podrias pasar, queria usarlo para mi trabajo

[@mayamamaicez9327]

Un crack

[@Rk2o92]

Buen video. like

[@munoztorresjhonramiro1594]

Crack por ti paso el semestre fijo fijo jajaj

[@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

[@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?

[@rbenx_c]

Haces 3 dias intenté clonar el login de google con Bootstrap y estuve como 4 horas para terminarlo, al final terminé usando css puro y casi nada de Bootstrap🤣🤣

[@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

[@marpl3x121]

Viejo se ve que es bueno tu video pero yo por ejemplo soy muy novato y quise ver tu video para parender a usar bootstrap desde cero, tal vez fue mi error de que no es un tutorial desde cero, pero no pude seguirte porque nunca explicaste como aplicar tu framework desde mi equipo, como abrirlo en el visual ni nada, te hubiese tomado tal vez 5 minutos, pero bueno, igual gracias por la intencion.

[@skorchhh]

Capo para este tutorial requieres saber al menos fundamentos de bootstrap

[@cristianrazo5014]

Con lo que tardaste en escribir el comentario ya estarias viendo un video de 5min para iniciar con bootstrap o puedes leer la documentacion