Jumbotronsv5.x

Jumbotrons (aka Hero Units) help focus page content

Bootstrap v5.x | Jumbotrons


Add random image (1400 x 400)

60%

Add sample title

Add sample subtitle

Add sample body text w/ link Clear
Reset to white

None

More icons...

Jumbotron

This right here is the subtitle ...

This is a simple jumbotron (or hero unit), a component useful for calling extra attention to featured content or information.

<div class="jumbotron rounded-0 mb-4">
   <div class="container p-5">
      <h3 class="display-5 fw-bold custom-text-color">Jumbotron</h3>
      <p class="fs-3 custom-text-color opacity-75">This right here is the subtitle ...</p>
      <p class="lead custom-text-color">This is a simple jumbotron (or hero unit), a component useful for calling extra
         attention to featured content or information.</p>
      <button class="btn btn-primary btn-lg mt-4" type="button">
      <i class="bi bi-info-circle-fill me-2"></i>
         Learn more</button>
   </div>                  
</div>

Custom CSS

Bootstrap v5.x has no native .jumbotron class. Most Bootstrap 5 utility classes can be used to style the background, fonts, buttons, etc., but custom CSS may be required to add additional styling. Add the .jumbotron class, below, for a jumbotron with a background image and colored overlay. You may wish to set the min-height to force the jumbotron to expand vertically.

/* Jumbotron class */
.jumbotron {
   background: linear-gradient(rgba(7, 55, 99, 0.75), rgba(7, 55, 99, 0.75)), url('https://unsplash.it/1400/400') center/cover no-repeat;
}

/* Custom Text Color */
.custom-text-color {
   color: #FFFFFF !important;
}

This will reset the page. Are you sure?