Ejercicio Bootstrap: reto colores y fondo con divs

Ejercicio de programación: Reto colores y fondo

Este ejercicio de programación está diseñado para poner a prueba tus conocimientos en Bootstrap. Es un ejercicio avanzado que pondrá a prueba tus conocimientos expertos.

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

Información adicional del ejercicio

Aplicar clases de color de texto, fondo y transparencia de Bootstrap para crear elementos con diferentes estilos visuales.

Contenido del ejercicio

Crea un documento HTML que contenga tres elementos div con las siguientes características:

Primer div: Debe tener texto de color primario (.text-primary) y fondo secundario (.bg-secondary). El contenido del texto debe ser "Texto primario con fondo secundario".
Segundo div: Debe tener texto de color blanco (.text-white) y fondo de éxito (.bg-success). Además, debe tener una opacidad del 75% (.opacity-75). El contenido del texto debe ser "Texto blanco con fondo de éxito y transparencia".
Tercer div: Debe tener texto de color oscuro (.text-dark) y fondo de advertencia (.bg-warning). El contenido del texto debe ser "Texto oscuro con fondo de advertencia".

Cada div debe tener padding para que el texto sea legible. Utiliza la clase .p-3 para añadir el padding necesario.

Estructura tu documento HTML con las etiquetas básicas (<!DOCTYPE html>, <html>, <head>, <body>) e incluye el enlace CDN de Bootstrap 5.3.8 en el <head> del documento:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">

Coloca los tres divs dentro del <body> del documento, uno debajo del otro.

Lección relacionada

Este ejercicio está relacionado con la lección "Utilidades de colores y fondo" 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