Source

jumbotron

Componente ligero y flexible para exhibir contenido de estilo de unidad de héroe.

Un componente liviano y flexible que puede extender opcionalmente toda la ventana gráfica para mostrar mensajes clave de marketing en su sitio.

¡Hola Mundo!

Esta es una unidad de héroe simple, un componente de estilo jumbotron simple para llamar la atención adicional sobre el contenido o la información destacados.


Utiliza clases de utilidad para la tipografía y el espaciado para espaciar el contenido dentro del contenedor más grande.

Aprende más

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>

Para hacer el jumbotron de ancho completo y sin esquinas redondeadas, agregue la .jumbotron-fluidclase de modificador y agregue .containero .container-fluiddentro.

Jumbotrón fluido

Este es un jumbotron modificado que ocupa todo el espacio horizontal de su padre.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>