Ver índice de contenidos del libro

6.12. Jumbotron

Se trata de un componente para mostrar contenidos de forma muy destacada. Si no lo encierras dentro de un elemento .container, ocupa toda la anchura del dispositivo. Si lo encierras dentro de un .container, solamente ocupará la anchura del contenedor y mostrará esquinas redondeadas. Ejemplo:

<div class="jumbotron">
  <div class="container">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p><a class="btn btn-primary btn-lg" role="button">Leer más</a></p>
  </div>
</div>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:

Jumbotron en Bootstrap 3

Figura 6.45 Jumbotron en Bootstrap 3