Ejercicio de programación con Bootstrap: Clases de utilidad
Código
0h 15m
Aprende a utilizar las clases de espaciado de Bootstrap 5.3 con este ejercicio práctico. Mejora tus habilidades en diseño web aplicando márgenes y paddings correctamente.
Enlaza el CDN de Bootstrap 5.3 en el <head>
del documento y dentro del <body>
, crea una estructura que incluya los siguientes elementos:
- Un
div
con un margen inferior de 3 unidades utilizando la clase de utilidad correspondiente. - Un párrafo con el texto "Texto en rojo" y el color de texto rojo utilizando la clase de utilidad correspondiente.
- Un
div
con un fondo azul y texto blanco utilizando las clases de utilidad correspondientes. - Un párrafo con tamaño de fuente grande y otro con tamaño de fuente pequeño utilizando las clases de utilidad correspondientes.
- Un párrafo con el texto centrado utilizando la clase de utilidad correspondiente.
- Un
div
que solo sea visible en pantallas medianas y grandes utilizando las clases de utilidad correspondientes. - Un contenedor
div
con dos elementos hijos dispuestos en un modelo de caja flexible (flexbox) utilizando las clases de utilidad correspondientes. - Un
div
con borde redondeado utilizando las clases de utilidad correspondientes.
Todos los ejercicios de programación de Bootstrap
Evalúa tus conocimientos con ejercicios de programación en Bootstrap de tipo Test, Puzzle, Código y Proyecto con VSCode.
Listado y formulario de productos en Bootstrap CSS
Proyecto
Utilidades de colores y fondo
Código
Instalación de Bootstrap
Código
Página web completa con Bootstrap
Proyecto
Tipografía y fuentes en Bootstrap
Puzzle
Flexbox en Bootstrap
Puzzle
Utilidades de espaciado y alineación
Puzzle
Conocimiento general de Bootstrap
Código
Conocimiento general de Bootstrap
Test
Fundamentos del sistema de grid de Bootstrap
Código
Imágenes responsive en Bootstrap
Código
Proyecto blog de artículos con Bootstrap CSS
Proyecto
Introducción a Bootstrap
Test
Formularios y validación
Código
Modales y ventanas emergentes
Test
Navbars y menús de navegación en Bootstrap
Puzzle
Componentes de Bootstrap
Código
Certificados de superación de Bootstrap
Supera todos los retos de Bootstrap y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.
Tutorial para resolver este ejercicio de programación
Bootstrap
Clases de utilidad
Utilidades y helpers