Jumbotron

Lightweight, flexible component for showcasing hero unit style content.

Bootstrap docs

Basic example

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more
<!-- Jumbotron -->
<div class="jumbotron border">
  <h1>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 class="pb-3">It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a href="#" class="btn btn-primary btn-shadow" role="button">Learn more</a>
</div>

Background image

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more
<!-- Jumbotron with background image -->
<div class="jumbotron bg-size-cover bg-position-center bg-no-repeat text-center" style="background-image: url(path-to-image);">
  <div class="bg-overlay rounded opacity-70">
  <div class="bg-overlay-content">
    <h1 class="text-light text-shadow">Hello, world!</h1>
    <p class="lead text-light text-shadow">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 hr-light">
    <p class="text-light text-shadow pb-3">It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <a href="#" class="btn btn-primary" role="button">Learn more</a>
</div>
Top