Criando um Jumbotron
A jumbotron indica uma caixa grande para chamar a atenção extra para algum conteúdo ou informação especial.
A jumbotron é exibido como uma caixa cinza com cantos arredondados. Ele também aumenta o tamanho da fonte do texto dentro dele.
Dica: Dentro de um jumbotron você pode colocar praticamente qualquer HTML válido, incluindo outros Bootstrap elementos / classes.
Use um <div> elemento com classe .jumbotron para criar uma jumbotron:
Bootstrap Tutorial
Bootstrap é o HTML, CSS, e um quadro mais popular JS para o desenvolvimento, mobile-primeiros projectos que respondem na web.
Jumbotron Dentro Container
Coloque o telão dentro do <div class="container"> Se você quer que o jumbotron não estender para 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>
Tente você mesmo " Jumbotron Fora Container
Coloque o jumbotron fora da <div class="container"> se quiser que o jumbotron para estender às 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>
Tente você mesmo " Criando um cabeçalho da página
Um cabeçalho da página é como uma seção de divisão.
O .page-header classe adiciona uma linha horizontal sob o título (+ adiciona algum espaço extra em torno do elemento):
Exemplo cabeçalho da página
Use um <div> elemento com classe .page-header para criar um cabeçalho de página: