Ejercicio Bootstrap: utilidades de dimensiones y responsive

Ejercicio de programación: Reto Dimensiones con Bootstrap

Este ejercicio de programación está diseñado para poner a prueba tus conocimientos en Bootstrap. Es un ejercicio de nivel intermedio que requiere conocimientos sólidos de la tecnología.

Tipo: Ejercicio de código 5 minutos estimados 200 puntos de experiencia

Información adicional del ejercicio

Implementa elementos HTML con diferentes dimensiones usando las utilidades de ancho, alto y límites máximos de Bootstrap.

Contenido del ejercicio

Crea una página HTML que demuestre el uso de las utilidades de dimensiones de Bootstrap. Tu página debe incluir:

Contenedores con clases de ancho: Crea 4 elementos div consecutivos que muestren los anchos w-25, w-50, w-75 y w-100. Cada div debe tener un color de fondo diferente y texto que indique su porcentaje de ancho.
Elementos con clases de alto: Dentro de un contenedor con altura fija de 300px, crea 3 elementos div que demuestren las alturas h-25, h-50 y h-75. Cada elemento debe tener un color de fondo distinto y texto descriptivo.
Uso de max-width y max-height: Crea un elemento con la clase mw-100 y otro con mh-100, ambos con contenido que demuestre cómo funcionan estos límites máximos.
Combinación responsive: Implementa un elemento que use clases responsive de ancho, por ejemplo que sea w-100 en móvil, w-75 en tablet (md) y w-50 en desktop (lg).

Para facilitar la visualización, añade clases de Bootstrap para colores de fondo (bg-primary, bg-secondary, etc.), texto blanco (text-white) y espaciado (p-2, mt-2). Incluye el CDN de Bootstrap 5.3 en tu HTML.

Estructura tu código HTML con las etiquetas básicas (html, head, body) y organiza los elementos de forma clara y ordenada.

Lección relacionada

Este ejercicio está relacionado con la lección "Tamaño ancho y alto" de Bootstrap. Te recomendamos revisar la lección antes de comenzar.

Ver lección relacionada

Más ejercicios de Bootstrap

Explora más ejercicios de programación en Bootstrap para mejorar tus habilidades y obtener tu certificación.

Ver más ejercicios de Bootstrap

Solución al ejercicio de programación en Bootstrap

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el ejercicio de programación en Bootstrap para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js

JavaScript

1 function solveChallenge ( input ) {

2 // Algoritmo optimizado O(n log n)

3 const data = parseInput ( input );

4 const sorted = data . sort (( a , b ) => a - b );

6 // Aplicar técnica de dos punteros

7 let left = 0 , right = sorted . length - 1 ;

8 const result = [];

10 while ( left < right ) {

11 const sum = sorted [ left ] + sorted [ right ];

12 if ( sum === target ) {

13 result . push ([ sorted [ left ], sorted [ right ]]);

14 left ++; right --;

15 } else if ( sum < target ) {

16 left ++;

17 } else {

18 right --;

19 }

20 }

22 return result ;

23 }

Código completo

Explicaciones

Mejores prácticas

+1.200 developers han resuelto este ejercicio de programación

Practica con ejercicios de programación en Bootstrap

Mejora tus habilidades con cientos de ejercicios de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Asistente de IA

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Comenzar a programar

Únete a miles de desarrolladores mejorando sus habilidades en Bootstrap

⭐⭐⭐⭐⭐

4.9/5 valoración