Curso de Bootstrap 5 #3. Sistema de columnas

En la tercera clase del curso de Bootstraps 5 aprendemos todo lo que está relacionado con el desarrollo responsive mediante este framework.

Hasta ahora hemos aprendido a utilizar las clases “básicas” de Bootstrap, algo fundamental sin duda, pero no hemos analizado cómo podemos hacer que una web sea realmente responsive, es decir, que si la visitamos desde un ordenador, esté dividido por columnas (un sidebar por ejemplo), en cambio, si la visitamos desde el móvil, que aparezca una cosa encima de otra.

Y finalmente también aprenderemos a desarrollar páginas web pensando en diferentes dispositivos (móviles, tablets, ordenadores, televisores, etc) ¡Veamos la clase!

Como habéis podido comprobar, memorizando unas pocas clases, podemos crear absolutamente cualquier página web y que además sea totalmente responsive.

Bien es cierto que ha sido un poco más complicado que las clases básicas de Bootstrap, no obstante, lo más complicado (el sistema de columnas) ya lo hemos dejado atrás, ahora iremos introduciéndonos en conceptos que aunque más avanzados, no son nada complicados.

En esta clase ya hemos podido observar diferencias con versiones anteriores de Bootstrap, la primera de ellas, es que ahora el sistema de columnas de Bootstrap tiene un mayor soporte para pantallas más grandes, esto es debido a que cada vez, más gente utiliza los televisores para navegar en Internet, gracias a dispositivos como FireTV, AndroidTV o incluso las videoconsolas.

Otra de las diferencias de Bootstrap 5 si lo comparamos con versiones anteriores es que ahora tiene el soporte “gutters” que nos permite hacer una especie de margin entre columnas (cuando no están colapsadas) que antes era del todo imposible para hacer muchos efectos.

Como siempre, si tenéis cualquier duda o pregunta, podéis mandarla a través del formulario de soporte de la intranet de suscriptor. ¡Nos vemos en la siguiente lección!

• Curso de Bootstrap 5 #1. Introducción y novedades
• Curso de Bootstrap 5 #2. Diseñando con Bootstrap
• Curso de Bootstrap 5 #3. Sistema de columnas
• Curso de Bootstrap 5 #4. Reprogramar Bootstrap
• Curso de Bootstrap 5 #5. Reduciendo el peso
• Curso de Bootstrap 5 #6. Creando nuestra versión de Bootstrap
• Curso de Bootstrap 5 #7. SASS: Añadiendo clases propias
• Curso de Bootstrap 5 #8. Bootstrap con JavaScript
• Curso de Bootstrap 5 #9. Bootstrap en themes
• Curso de Bootstrap 5 #10. Iconos avanzados