Skip to content

Responsive Jumbotron built with Bootstrap 5. Examples of classic hero component, with background image, with navbar and many other combinations.

Notifications You must be signed in to change notification settings

mdbootstrap/bootstrap-jumbotron

Repository files navigation

Responsive Jumbotron built with Bootstrap 5. Examples of classic hero component, with background image, with navbar and many other combinations.

Check out Bootstrap Jumbotron Documentation for detailed instructions & even more examples.

Basic example

Bootstrap 5 Jumbotron

<!-- Jumbotron -->
<div class="p-4 shadow-4 rounded-3" style="background-color: hsl(0, 0%, 94%);">
  <h2>Hello world!</h2>
  <p>
    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>
    It uses utility classes for typography and spacing to space content out within the
    larger container.
  </p>
  <button type="button" class="btn btn-primary">
    Learn more
  </button>
</div>
<!-- Jumbotron -->

How to use?

  1. Download MDB 5 - free UI KIT

  2. Choose your favourite customized component and click on the image

  3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources

More examples

Bootstrap Jumbotron Background image: Bootstrap 5 Avatar

Bootstrap Jumbotron With navbar: Bootstrap 5 Avatar

Bootstrap Jumbotron Background image with navbar: Bootstrap 5 Avatar

Bootstrap Jumbotron Fixed navbar: Bootstrap 5 Avatar

Bootstrap Jumbotron Animated navbar: Bootstrap 5 Avatar


More extended Bootstrap documentation