Never Push to Master


    1.0.0 • Public • Published

    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>
        This is a simple hero unit, a simple jumbotron-style component for calling extra
        attention to featured content or information.
      <hr class="my-4" />
        It uses utility classes for typography and spacing to space content out within the
        larger container.
      <button type="button" class="btn btn-primary">
        Learn more
    <!-- 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


    npm i bootstrap-jumbotron

    DownloadsWeekly Downloads






    Unpacked Size

    6.06 MB

    Total Files


    Last publish


    • mdbootstrap