Bootstrap 4 Jumbotron


Bootstrap 4 Jumbotron

Um jumbotron indica uma grande caixa cinza para chamar atenção extra para algum conteúdo ou informação especial.

Dica: Dentro de um jumbotron você pode colocar praticamente qualquer HTML válido, incluindo outros elementos/classes do Bootstrap.

Tutorial de Bootstrap

Bootstrap é o framework HTML, CSS e JS mais popular para desenvolver projetos responsivos e mobile-first na web.

Use um <div>elemento com classe .jumbotronpara criar um jumbotron:

Exemplo

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS...</p>
</div>

Jumbotron de largura total

Se você quiser um jumbotron de largura total sem bordas arredondadas, adicione a .jumbotron-fluidclasse e um .containerou .container-fluiddentro dela:

Exemplo

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS...</p>
  </div>
</div>