Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

CSS Conceptos básicos de Bootstrap Usar Componentes Bootstrap Usando Jumbotron para Destacar Contenido Clave

Publicado por tim123
tim123
9,461 Puntos

Jumbotron ya no está disponible en Bootstrap

jumbotron ya no está disponible

4 respuestas

Terry Babyuk
Terry Babyuk
9,231 Puntos

Hola Timothy,

Como Steven realmente no te ha dado una forma concreta de localizar el jumbotron en la versión anterior de Bootstrap, aquí está el enlace:

https://getbootstrap.com/docs/4.1/components/jumbotron/

Samuel Weirton
Samuel Weirton
6,945 Puntos
Samuel Weirton
Samuel Weirton
6,945 Puntos

Aquí hay una solución para el Jumbotron que estoy usando para esta lección:

<!-- Jumbotron -->
<div class=p-5 rounded-lg bg-info text-white>
  <div class=container text-sm-center pt-5>
    <h1 class=display-2>Conferencia Full Stack</h1>
    <p class=lead>¡Una Conferencia de Un Día Sobre Todo lo Relacionado con JavaScript!</p>
  </div>
</div> <!-- Jumbotron -->
Steven Parker
Steven Parker
244 163 puntos
Steven Parker
Steven Parker
244 163 puntos

Con cualquier tecnología que evolucione rápidamente, es importante asegurarse de que está utilizando la misma versión que el curso.

Probablemente has instalado Bootstrap 5, pero este curso utiliza Bootstrap 4.

studio 9ine
studio 9ine
32 Puntos
studio 9ine
studio 9ine
32 Puntos

¿cómo localizo el nuevo jumbotron?

Steven Parker
Steven Parker
244 163 puntos
Steven Parker
Steven Parker
244 163 puntos

Como Tim señalaba hace 2 años, los Jumbotrons ya no son compatibles con Bootstrap 5. Sin embargo, puede usar un elemento <div> y agregar clases auxiliares especiales junto con una clase de color para lograr el mismo efecto:

<div class=mt-4 p-5 bg-primary text-white rounded>
  <h1>Ejemplo de Jumbotron</h1>
  <p>Lorem ipsum...</p>
</div>

Hay algunos otros ejemplos sugeridos en esta página de la documentación de Bootstrap.