Bootstrap Jumbotron y encabezado de página
Creando un Jumbotron
Un jumbotron indica un cuadro grande para llamar la atención sobre algún contenido o información especial.
Un jumbotron se muestra como un cuadro gris con esquinas redondeadas. También aumenta el tamaño de fuente del texto que contiene.
Sugerencia: dentro de un jumbotron puede colocar casi cualquier HTML válido, incluidos otros elementos/clases de Bootstrap.
Use un <div>elemento con clase .jumbotronpara crear un jumbotron:
Tutorial de arranque
Bootstrap es el marco HTML, CSS y JS más popular para desarrollar proyectos receptivos y móviles en la web.
Contenedor interior Jumbotron
Coloque el jumbotron dentro del <div class="container">si desea que el jumbotron NO se extienda hasta el borde de la pantalla:
Ejemplo
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Contenedor exterior Jumbotron
Coloque el jumbotron fuera del <div class="container">si desea que se extienda hasta los bordes de la pantalla:
Ejemplo
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Crear un encabezado de página
Un encabezado de página es como un separador de sección.
La .page-headerclase agrega una línea horizontal debajo del encabezado (+ agrega algo de espacio adicional alrededor del elemento):
Encabezado de página de ejemplo
Use un <div>elemento con clase .page-headerpara crear un encabezado de página:
Ejemplo
<div class="page-header">
<h1>Example Page Header</h1>
</div>