Bootstrap Jumbotron e cabeçalho de página
Criando um Jumbotron
Um jumbotron indica uma caixa grande para chamar atenção extra para algum conteúdo ou informação especial.
Um jumbotron é exibido como uma caixa cinza com cantos arredondados. Também aumenta os tamanhos de fonte do texto dentro dele.
Dica: Dentro de um jumbotron você pode colocar praticamente qualquer HTML válido, incluindo outros elementos/classes do Bootstrap.
Use um <div>elemento com classe .jumbotronpara criar um jumbotron:
Tutorial de Bootstrap
Bootstrap é o framework HTML, CSS e JS mais popular para desenvolver projetos responsivos e mobile-first na web.
Contêiner Interno Jumbotron
Coloque o jumbotron dentro do <div class="container">se quiser que o jumbotron NÃO se estenda até a borda da tela:
Exemplo
<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>
Contêiner Externo Jumbotron
Coloque o jumbotron fora <div class="container">se quiser que o jumbotron se estenda até as bordas da tela:
Exemplo
<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>
Criando um cabeçalho de página
Um cabeçalho de página é como um divisor de seção.
A .page-headerclasse adiciona uma linha horizontal sob o título (+ adiciona algum espaço extra ao redor do elemento):
Cabeçalho de página de exemplo
Use um <div>elemento com classe .page-headerpara criar um cabeçalho de página:
Exemplo
<div class="page-header">
<h1>Example Page Header</h1>
</div>